vue(24)网络请求模块axios使用
vue(24)网络请求模块axios使用
Axios
是一个基于 promise
的 HTTP
库,可以用在浏览器和 node.js
中。
主要的作用:axios
主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
axios有8个特性
从浏览器中创建 XMLHttpRequests
从 `node.js 创建 http 请求
支持
Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换
JSON
数据客户端支持防御
XSRF
安装
安装十分简单,使用 npm
:
npm install axios
案例
执行 GET
请求
axios .get("请求地址", { // 拼接参数写在params中 params: { ID: 12345, }, }) // 成功后做的事情 .then(function (response) { console.log(response); }) // 失败后做的事情 .catch(function (error) { console.log(error); });
执行POST
请求
axios .post("请求地址", { firstName: "jkc", lastName: "123", }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
执行并发请求,当我们想要同时发出2个请求,可以使用axios.all()
function getUserAccount() { return axios.get("/user/12345"); }function getUserPermissions() { return axios.get("/user/12345/permissions"); } axios.all([getUserAccount(), getUserPermissions()]).then((res) => { console.log(res); });
以上代码我们先定义了2个方法,每个方法都会发送一个请求,最后把2个方法都放在数组中,这样程序就会同时执行2个方法,且最后的结果是在数组中,结果如下:
上面返回的结果是在数组中,到时候取结果的时候就要用res[0]
,如果你觉得这样麻烦,如果我们想展开的话,可以使用axios.spread
方法
axios.all([getUserAccount(), getUserPermissions()]).then( axios.spread((res1, res2) => { console.log(res1); console.log(res2); }) );
此时,我们返回的结果就不是一个数组了,会分开来,结果如下:
axios请求配置
以下是创建请求时可以用的配置选项。只有 url
是必需的。如果没有指定 method
,请求将默认使用 get
方法。
{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // default // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `headers` 是即将被发送的自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是即将与请求一起发送的 URL 参数 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象 params: { ID: 12345 }, // `data` 是作为请求主体被发送的数据 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间,请求将被中断 timeout: 1000, // `auth` 表示应该使用 HTTP 基础验证,并提供凭据 // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头 auth: { username: 'janedoe', password: 's00pers3cret' }, }
响应结构
发送网络请求成功后,返回的响应结构如下:
{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 服务器响应的头 headers: {}, // `config` 是为请求提供的配置信息 config: {}, // 'request' // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance the browser request: {} }
配置默认值
配置网络请求时,你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com'; // 配置默认的baseURLaxios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 配置默认请求头中的Authorizationaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 配置默认的post请求方式
自定义实例默认值
// 创建实例时配置默认值const instance = axios.create({ baseURL: 'https://api.example.com'});// 创建实例后更改默认值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
拦截器
在请求或响应被 then
或 catch
处理前拦截它们。
// 2.1.请求拦截器 instance.interceptors.request.use( (config) => { console.log(config); // 1.比如config中的一些信息不符合服务器的要求 // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标 // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息 return config; }, (error) => { console.log(error); } ); // 2.2.响应拦截 instance.interceptors.response.use( (res) => { return res.data; }, (error) => { console.log(error); } );
项目中axios完整的封装
在真实项目开发中,我们会在src
文件夹中创建一个utils
文件夹,然后在文件夹中创建一个request.js
文件,写入如下代码:
import axios from "axios";export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: "http://xxx.xxx.xx.xx:8000", timeout: 5000, }); // 2.1.请求拦截器 instance.interceptors.request.use( (config) => { console.log(config); // 1.比如config中的一些信息不符合服务器的要求 // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标 // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息 return config; }, (error) => { console.log(error); } ); // 2.2.响应拦截 instance.interceptors.response.use( (res) => { return res.data; }, (error) => { console.log(error); } ); // 3.发送真正的网络请求 return instance(config); }
最后我们在main.js
中给网络请求配置下全局属性即可
import { request } from "@/utils/request"; Vue.prototype.$request = request;
这样以后,我们在任何目录下,都可以直接使用request
网络请求,不需要每次都导入了
来源https://www.cnblogs.com/jiakecong/p/15064619.html