axios封装,使用拦截器统一处理接口,超详细的教程(推荐)


Posted in Javascript onMay 02, 2019

最近从0开始搭了一个vue-cli的项目, 虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以笔者对axios进行了统一接口处理,废话不多说,直接上代码。   

首先,在vue-cli项目的src路径下新建一个axios文件夹,在axios文件夹里新建aps.js和request.js,api.js用于写接口,对axios的封装写在request.js里,项目机构如图:

axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

1. axios统一封装

然后开始统一封装axios, 首先引入axios、qs依赖,引入main.js主要是用于后面对接口进行统一处理,比如调接口的时候,显示loading等。这个main.js根据你个人情况,可加可不加。

//request.js
import axios from "axios";
import qs from "qs";
import app from "../main.js";

然后创建一个axios实例,这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置:

/****** 创建axios实例 ******/
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 5000 // 请求超时时间
});

axios实例创建好之后,开始使用request拦截器对axios请求配置做统一处理,具体如下:

/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
  app.$vux.loading.show({
    text: '数据加载中……'
  });
 
  config.method === 'post'
    ? config.data = qs.stringify({...config.data})
    : config.params = {...config.params};
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
  return config;
}, error => { //请求错误处理
  app.$vux.toast.show({
    type: 'warn',
    text: error
  });
  Promise.reject(error)
});

然后是对response做统一处理,代码如下:

/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
  response => { //成功请求到数据
    app.$vux.loading.hide();
    //这里根据后端提供的数据进行对应的处理
    if (response.data.result === 'TRUE') {
      return response.data;
    } else {
      app.$vux.toast.show({ //常规错误处理
        type: 'warn',
        text: response.data.data.msg
      });
    }
  },
  error => { //响应错误处理
    console.log('error');
    console.log(error);
    console.log(JSON.stringify(error));
 
    let text = JSON.parse(JSON.stringify(error)).response.status === 404
      ? '404'
      : '网络异常,请重试';
    app.$vux.toast.show({
      type: 'warn',
      text: text
    });
 
    return Promise.reject(error)
  }
);

最后,将我们的axios实例暴露出去,整个axios的封装就写完了。

export default service;

2. axios接口的调用方式

axios封装好之后,调用就很简单了。我们把接口统一写在api.js文件里。(当然,如果你的业务非常复杂的话,建议把不同业务的api分开放到不同的文件里,这样方便以后维护)。

注意:post请求参数放在data里面,get请求参数放在params里。

//api.js
import service from './request'
 
export const getPersonInfo = data => {
  return service({
    url: '/person_pay/getpersoninfo',
    method: 'post',
    data
  })
};

然后在具体的组件中进行调用。

//index.vue
import {getPersonInfo} from '../axios/api.js'
export default {
  created: async function () {
    const params = {
      card_no: '111'
    };
    let res = await getPersonInfo(params);
    console.log(res);
  }
}

附上项目代码地址:  https://github.com/xie991283109/vueCli-test

以上所述是小编给大家介绍的axios封装使用拦截器处理接口详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

 

Javascript 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
AngularJS Module方法详解
Dec 08 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 #Javascript
详解微信小程序缓存--缓存时效性
May 02 #Javascript
详解如何使用router-link对象方式传递参数?
May 02 #Javascript
详解Vue底部导航栏组件
May 02 #Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 #Javascript
详解微信小程序网络请求接口封装实例
May 02 #Javascript
You might like
php给每个段落添加空格的方法
2015/03/20 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php图片裁剪函数
2018/10/31 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
layui的select联动实现代码
2019/09/28 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python创建和删除目录的方法
2015/04/29 Python
python实现kMeans算法
2017/12/21 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
十佳青年个人事迹材料
2014/01/28 职场文书
公司节能减排倡议书
2014/05/14 职场文书
班级标语大全
2014/06/21 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
golang 实现并发求和
2021/05/08 Golang
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS