前言
axios 是目前最优秀的 HTTP 请求库之一,虽然 axios 已经封装的非常好了,我们可以直接拿过来用。但是在实际的项目中,我们可能还需要对 axios 在封装一下,以便我们更好的管理项目和各个接口,本篇文章是一个简易的Axios封装,方便朋友们上手。
1.封装的目的
此次进行简单的封装,所以暂时没有考虑取消重复请求、重复发送请求、请求缓存等情况!这里主要实现以下目的:
- 实现请求拦截
- 实现响应拦截
- 常见错误信息处理
- 请求头设置
- api 集中式管理
2.初始化 axios实例
虽然 axios 可以调用 get、post 等方法发起请求,但是我们为了更好的全局控制所有请求的相关配置,所以我们使用 axios.create()创建实例的方法来进行相关配置,这也是封装 axios 的精髓所在。
示例代码:
const http = axios.create({
// 设置请求接口数据的基准地址,后面请求的时候只需要加请求路径
baseURL: 'http://127.0.0.1:8888/api/private/v1/',
// 设置超时时间
timeout: 5000,
withCredentials: false
})
通过 create 方法我们得到了一个 axios 的实例,该实例上有很多方法,比如拦截器等等。我们创建实例的时候可以配置一些基础设置,比如基础请求地址,请求超时等等。
3.设置请求拦截
我们在发送请求的时候可能需要携带一些信息在请求头上,比如 token 等,所以说我们就需要将请求拦截下来,处理一些我们的业务逻辑。
实例代码:
http.interceptors.request.use(
(config) => {
// 如果开启 token 认证
if (serverConfig.useTokenAuthorization) {
config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
}
// 设置请求头
if(!config.headers["content-type"]) { // 如果没有设置请求头
if(config.method === 'post') {
config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
config.data = qs.stringify(config.data); // 序列化,比如表单数据
} else {
config.headers["content-type"] = "application/json"; // 默认类型
}
}
//请求时的进度条
nprogress.start();
return config;
},
(error) => {
Promise.reject(error);
}
);
我们通过调用 axios的实例方法进行请求拦截,并且下载了nprogress进度条插件,请求的时候使用start()方法,让进度条开始动。
4.设置响应拦截器
axios 请求的返回结果里面包含了很多东西,我们的业务层面通常只需要后端返回的数据即可,所以我们需要设置相应拦截,在响应结果返回给业务层之前做一些操作
实例代码:
// 设置响应拦截器
http.interceptors.response.use(
res => {
//拿到后端返回的data值
let data = res.data;
//启用nprogress结束动画
nprogress.done()
return data
}, error => {
return Promise.reject(error)
}
)
上述代码返回了一个请求完成之后拿到data的值,以及使用了进度条结束功能done()方法
5.封装请求方法
import http from '../http';
export const getUserInfo = (params) => {
return serviceAxios({
url: "/api/user/users",
method: "post",
params,
});
};
export const login = (data) => {
return serviceAxios({
url: "/api/user/login",
method: "post",
data,
});
};
重新创建一个文件夹,里面放请求的方法,并导出,get请求需要传params,post请求需要传data
6.调用方法
import { login } from "@/http/api/user"
async loginAsync() {
let params = {
email: "123",
password: "12321"
}
let data = await login(params);
console.log(data);
}
7.总结
我们这里只做了最最最基础的 axios 封装,但是可扩展性较高。因为看别的文章封装的太复杂了,这里的封装形式其实可以满足大部分应用场景了。希望对你们有用
一边学习一边更新,有写的不好的地方,希望大家提出意见