vue axios 网络请求响应拦截器的配置

vue axios 网络请求响应拦截器的配置

前言： vue项目开发中没有统一管理http、https响应的入口配置因此需要去构建统一接收请求和响应方法

每个项目网络请求接口封装都是很重要的一块，我的封装方法如下：

1、安装axios

npm install --save-dev axios

2、新建一个js文件，自定义取名:

3、引入 axios，mint-UI 如下：

import Vue from 'vue'
import axios from 'axios'
import {Indicator,MessageBox, Toast} from 'mint-ui'
 
/*axios全局配置*/
axios.defaults.withCredentials = true;
axios.defaults.baseURL = '/api/';//地址
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';//请求头根据自定义需求
axios.defaults.timeout = 8000;///默认请求超时时间
Vue.prototype.$axios = axios;

4、请求拦截如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    Indicator.open();
    //比如加密啊啥的都可以放在这里，包括设置头部处理
    return config;
  }, function (error) {
    // 对请求错误需要做的处理
    Indicator.close();
    return Promise.reject(error);
  });

5、请求相应操作的处理：

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    Indicator.close();
    if (response) {
        switch (response.data.code) {
            case '200':
                // 成功的处理(解密啥的)
                break;
            case '999999':
                Message.error({
                  message: '系统异常'
                })
                break;
        }
    }
    return response;
  }, function (error) {
      // 对响应错误做点什么
      Indicator.close();
      return Promise.reject(error);
});

// axios请求用于其依赖文件调用
export default axios;

6、业务如何调用请求如下：

// Get方法
initDataGet : function(){
 	 this.$axios({
	    method: 'get',
	    url: 'program/.....',
	  })
	  .then(function (response) {
	      //数据处理
	   })
	  .catch(function (error) {
	      console.log(error);
	  });
}

// POST方法
initDataPost : function(){
	this.$axios({
     method: 'post',
     url: 'program/...',
     data: edata,//数据
   })
   .then(function (response) {
       //数据处理
    })
   .catch(function (error) {
       console.log(error);
   });
}

以上是自己整理的一个方法，还需要很多改善地方评论可以点出哟~