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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解vue几种主动刷新的方法总结
Feb 19 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python实现简单遗传算法
2018/03/19 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python实现UDP协议下的文件传输
2020/03/20 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python是怎么被发明的
2020/06/15 Python
浅谈python出错时traceback的解读
2020/07/15 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
实习自荐信
2013/10/13 职场文书
个人求职信范文分享
2013/12/13 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
大学生党性分析材料
2014/12/19 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
家长会主持词开场白
2015/05/29 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
vue修饰符.capture和.self的区别
2022/04/22 Vue.js