最近需要重构一个原有项目,发现以前的项目每个组件中走一遍axios流程,最终写出“意大利面条”式的代码。况且很多时候在前端需要设置header,保存token,对异常进行统一处理等,所以最好对其进行封装。vuex结合axios,能够很好的进行封装。为了项目的结构清晰,我们可以创建一个api文件夹,只在这个地方处理请求。如下图所示:
然后我们可以定义一个fetch文件 在这里面封装axios。具体代码如下所示
import axios from 'axios'
import {baseUrl} from '../config/env'
import {Message} from 'element-ui'
const service = axios.create({
baseURL: baseUrl,
timeout: 10000,
})
const fetch = function (method, url, params, data) {
// console.log("[axio] url:" + url + ",params:"+ JSON.stringify(params) + ",data:"+ JSON.stringify(data))
return new Promise((resolve, reject) => {
service({ url, method, params, data})
.then((res) => {
// console.log("[axio] return:", res)
if(res.data.code === 0){
resolve(res.data)
} else {
// console.log(res.data)
Message.warning(res.data.ch||res.data.message)
}
}).catch((err) => {
reject(err)
console.log('err:',err);
})
})
}
export default fetch
baseUrl是我们请求的地址,然后我们可以定义一个proxy文件在这里面处理请求
import fetch from './fetch'
import fetchrate from './fetchrate'
// 用户登录
export function login(data) {
return fetch('post', 'url参数', null, data);
}
// 获得用户列表
export function getUser(params) {
return fetch('get', 'url参数', params, null);
}
这样的话我们就已经把请求都处理完毕 然后在需要的地方调用就行 比如我想调用这个登陆接口:
methods: {
async login(formName) {
let body = {
username: this.ruleForm.username,
password: this.ruleForm.password
};
let data = await api.login(body);
let obj = data.res;
obj.login = true;
sessionStorage.setItem("ms_username", JSON.stringify(obj));
this.$router.push({ path: "/" });
}
}
这样,我们对axios的简单封装就算完毕了,希望对你们有点帮助