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 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
js实现日历的简单算法
Jan 24 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
数学教研活动总结
2014/07/02 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年检验科工作总结
2014/11/22 职场文书
奖励申请报告范文
2015/05/15 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python