结合axios对项目中的api请求进行封装操作


Posted in Javascript onSeptember 21, 2020

痛点:

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请求进行封装操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
微信小程序实现打卡签到页面
Sep 21 #Javascript
微信小程序实现签到弹窗动画
Sep 21 #Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 #Javascript
微信小程序实现日历签到
Sep 21 #Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
随机头像PHP版
2006/10/09 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python是编译运行的验证方法
2015/01/30 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python如何读写二进制数组数据
2020/08/01 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
静态变量和实例变量的区别
2015/07/07 面试题
《赶海》教学反思
2014/04/20 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年环卫工作总结
2014/11/22 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS