结合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;
下面是对全部的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请求进行封装操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)