http请求封装

Vue的项目封装一个HTTP请求
2019.02.27 19:45 503浏览
前言
在开发的Vue项目的时候，我们一般情况下是使用Axios公司这个HTTP库请求后台的接口，每个的请求代码如下

this.axios({
method: “POST”,
url: “接口地址”,
data: {
参数名1:“参数值1”,
参数名2:“参数值2”
}
}).then(res => {
// 请求成功
}).catch(error=>{
// 请求失败
});
以上代码虽然并不复杂，但是当你请求非常多接口时，就会发现写了十分多的重复代码，并且不太利于维护。下面我们来封装一个全局的HTTP请求，并统一管理后台接口。

开发步骤一：使用无极代替回调函数封装HTTP请求
import axios from “axios”;
import { Toast } from “mint-ui”;
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 == 0) {
resolve(res);
} else if (res.code == -1) {
resolve(res);
}
}).catch(() => {
reject();
Toast({
message: “发生错误，请检查！”,
position: “middle”,
duration: 2000
});
})
}
};
export { HttpRequest };

开发步骤二：统一管理API
import { HttpRequest } from “…/utils/http”;
let Doctor = {
// 关注医生
followDoctor: function(datas) {
return HttpRequest.getRequest({
method: “POST”,
url: “API地址”,
data: datas
});
},
// 获取评价标签
getElvaluateTag: function(datas) {
return HttpRequest.getRequest({
method: “GET”,
url: “API地址”,
data: datas
});
}
};
export { Doctor };
开发步骤三：调用API
import { Doctor } from “@/models/doctor.js”;

followDoctor() {
let datas = {
current: this.current,
size: this.size
};
Doctor.followDoctor(datas).then(res => {
console.log(res)
});
},

getElvaluateTag() {
let datas = {
userId: this.userId
};
Doctor.getElvaluateTag(datas).then(res => {
console.log(res)
});
},