结合axios对项目中的api请求进行封装操作
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
痛点：
1. 后端对全部请求的url进行了调整。
2.后端要求给所有的请求头部添加一个token， 或者对请求添加其他全局处理。
3.请求代码直接写在每个页面里， 看起来代码臃肿，不够简练，太难管理。
4.看到请求代码, 不明白该请求是干嘛的，语义化不够明显。 ...
上面列举的是一些常见的问题，如果没对api进行封装，当请求比较多的时候，修改起来欲哭无泪，解决这些问题可以进行以下操作
1.对axios进行二次封装
2.对全部api请求也进行封装
如下是对axios 进行二次封装, 文件名是 network/index.js：
import axios from "axios";
import Cookies from "js-cookie";
// 设置超时时间
const myAxios = axios.create({
timeout: 5000
});
// 跳转登录页面
function nav2Login() {
location.href = '/xxxx/login'
}
// 添加一个请求拦截器
myAxios.interceptors.request.use(
function(config) {
// Do something before request is sent
config.headers["token"] = Cookies.get("token") || "";
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// 添加一个响应拦截器
myAxios.interceptors.response.use(
function(response) {
// Do something with response data
// 这里只是以200 401为示例， 其他状态码可以根据需要自行添加
if (response.status === 200) {
return response.data;
} else if (response.status === 401) {
nav2Login()
return Promise.reject();
} else {
return {
status: 0,
message: response.data.message
};
}
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
export default myAxios;
狼蚁网站SEO优化是对全部的api进行了封装，文件名是 network/api.js:
import axios from "./index.js";
const API = {
userList: 'api/user/all', // 用户列表
cityList: 'api/city/all', // 城市列表
};
function Axios(obj) {
return axios({
...obj
}).catch(e => {
// 这里兜住error, 从而不影响后续代码执行，避免出现白屏
return {
status: 0,
message: "网络请求异常"
};
});
}
// 给函数命名的时候 尽量语义化
function getUserList(params) {
return Axios({
url: API.userList,
method: "post",
params
});
}
function getCityList(params) {
return Axios({
url: API.cityList,
method: "get",
params
});
}
export default {
getUserList,
getCityList,
}
可以把这些请求挂载在一个全局的变量上， 以Vue为例：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import api from "@/network/api.js";
Vue.prototype.$api = api;
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Vue项目中使用方法如下：
this.$api.getUserList(obj).then(res => {
// 处理res
}).catch(err){
// 处理 err
}
// 或者使用async await
async getUserList () {
try {
const res = await this.$api.getUserList(obj)
// 处理res
} catch (err) {
// 处理err
}
}
补充知识：Vue项目中对axios进行封装以及api接口请求
对axios进行封装：
/* 定义一个ajax请求函数，并且其返回值: promise对象(异步返回的数据是: response.data) */
import axios from 'axios';
export default function ajax (url, data={}, type='GET') {
return new Promise(function (resolve, reject) {
// 执行异步ajax请求
let promise
if (type === 'GET') {
// 准备url query参数数据,
let dataStr = '' //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
}
// 发送get请求
promise = axios.get(url)
} else {
// 发送post请求
promise = axios.post(url, data)
}
promise.then(function (response) {
// 成功了调用resolve()
resolve(response.data)
}).catch(function (error) {
//失败了调用reject()
reject(error)
})
})
}
以上这篇结合axios对项目中的api请求进行封装操作就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。
上一篇：微信小程序实现转盘抽奖
下一篇：微信小程序实现打卡签到页面