当前位置 博文首页 > 盛夏温暖流年：vue 项目封装 axios 的 HTTP 请求
在介绍如何封装 axios 的 http 请求之前，我们先来了解下什么是 axios。
axios 是通过 promise 实现对 ajax 技术 的一种封装，就像 jQuery 实现 ajax 封装一样。
简单来说，ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装。
平时开发 vue 项目时，不同模块都会使用 axios 请求后台的接口，代码如下：
this.$axios({
method: "POST",
url: "接口地址",
params: {
参数名1:"参数值1",
参数名2:"参数值2"
}
}).then(res => {
// 请求成功
}).catch(error=>{
// 请求失败
});
当请求的接口越来越多时，就会发现写了很多的重复代码，不太利于维护。如果需要使用统一的过滤规则，比如实现超时退出，就需要修改每一个请求的代码，非常麻烦。
因此，我们可以封装一个全局的HTTP请求，来统一管理后台接口，封装步骤如下：
首先在 src 的 util 文件夹下新建 http.js，使用 Promise 代替回调函数封装 HTTP 请求：
http.js 代码
import axios from "axios";
var HttpRequest = {
getRequest({ url, data = {}, method = "GET" }) {
return new Promise((resolve, reject) => {
this._getRequest(url, resolve, reject, data, method);
});
},
_getRequest: function(url, resolve, reject, data = {}, method = "GET") {
let format = method.toLocaleLowerCase() ==='get'?'params':'data';
axios({
url: url,
method: method,
[format]: data,
header: {
"content-type": "application/json"
}
}).then(res => {
if (res.code == 200) {
resolve(res);
} else if (res.code == 403) {
// 如果接口返回 403，进行登录超时处理
}
}).catch(() => {
// 异常处理
reject();
})
}
};
export { HttpRequest };
在 src 的 service 文件夹下新建 auth.js，用于统一管理项目中的权限相关请求：
auth.js 代码
import { HttpRequest } from "../util/http";
let Auth = {
// 判断用户名称重复
checkUsername: function(data) {
return HttpRequest.getRequest({
method: "GET",
url: "/api/user/checkUsername",
data: data
});
},
// 用户注册
register: function(data) {
return HttpRequest.getRequest({
method: "POST",
url: "/api/user/register",
data: data
});
},
// 获取用户信息
getUserInfo: function(data) {
return HttpRequest.getRequest({
method: "GET",
url: "/api/auth/user/getUserInfo",
data: data
});
},
// 编辑用户信息
editUser: function(data) {
return HttpRequest.getRequest({
method: "POST",
url: "/api/auth/user/editUser",
data: data
});
}
};
export {Auth};
在需要进行权限请求的地方调用对应的API：
导入 API ：
import { Auth } from "../service/auth.js";
在方法中实现：
let data = {
username: this.username
};
Auth.checkUsername(data).then(response = > {
if (response.data.code == 200) {
// 用户名重复的对应处理
} else {
// 未重复的对应处理
}
});
欢迎关注我的公众号，用讲故事的方式学技术。
这里有脑洞大开的奇葩故事，也有温暖文艺的心灵感悟。
技术知识，也可以很有趣。
