为什么选择axiox
作者推荐,量级轻。
功能特点
- 在浏览器中发送XMLHttpRequests请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- …
使用
首先安装 npm install axios --save
然后即可引入后使用 import axios from “axios”;
发送并发请求
将请求结果放到一个数组里面
将请求结果分开存放
axios封装
// 方法一
export function request(config, success, failure) {
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000,
})
instance(config)
.then((res) => {
// console.log(res);
success(res);
})
.catch((res) => {
failure(res);
});
}
// 方法二:Promise方法
export function request(config) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000,
})
instance(config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
})
}
// 方法三
export function request(config) {
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000,
})
return instance(config);
}
拦截
- 请求拦截
- 响应拦截
// 拦截
export function request(config) {
// 1. 创建axios实例
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000,
})
// 2. 拦截
// axios.interceptors.request.use()
// 请求拦截
instance.interceptors.request.use(config => {
console.log(config);
// 在这里拦截了config,一定要将他返回出去,否则请求会失败
// 1.config中的一些信息不符合服务器的要求
// 2. 比如每次发送网络请求的时候,都希望在界面中显示一个请求的图标
// 3. 某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config;
}, err => {
console.log(err);
})
// 响应拦截
instance.interceptors.response.use(res => {
console.log(res);
return res.data;
}, err => {
console.log(err);
})
// 发送真正的网络请求
return instance(config);
}