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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JS高级笔记
Jul 13 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
VUE实现日历组件功能
Mar 13 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
关于element的表单组件整理笔记
Feb 05 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
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
爱晚亭导游词
2015/02/09 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
劳动模范获奖感言
2015/07/31 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers