结合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 相关文章推荐
Jquery 自定义动画概述及示例
Mar 29 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JavaScript WeakMap使用详解
Feb 05 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
两个php日期控制类实例
2014/12/09 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php实现头像上传预览功能
2017/04/27 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
Python实现随机选择元素功能
2017/09/14 Python
python实现用户答题功能
2018/01/17 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
司机岗位职责
2013/11/15 职场文书
教师个人剖析材料
2014/02/05 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
重点工程汇报材料
2014/08/27 职场文书
住房抵押登记委托书
2014/09/27 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
爱的承诺书
2015/01/20 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
七年级作文之我的梦想
2019/10/16 职场文书