vue（24）网络请求模块axios使用
什么是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'; // 配置默认的baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 配置默认请求头中的Authorization
axios.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网络请求，不需要每次都导入了
