Vue.js React.js 封装Axios拦截器 两个框架通用

在src目录下创建个api目录，并创建index.js文件,React的话，js文件名首字母大写

import axios from 'axios'; // 这里没啥好说的
import qs from 'qs';
import { message } from 'antd'; // 这里如果用了某个UI组件，那就加载一下消息提醒组件，这是React中引用了antd， vue中我用了elementui, 也差不多的引用方式 如： import { Message } from 'element-ui', 函数里面用到的message组件，请自行更换

var root = 'http://www.****.com/' // 接口地址，自行判断生产还是开发环境加载不同地址

// post请求的Content-Type用 application/x-www-form-urlencoded
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'


// 自定义判断元素类型JS
function toType(obj) {
  return {}.toString
    .call(obj)
    .match(/\s([a-zA-Z]+)/)[1]
    .toLowerCase()
}
// 参数过滤函数
function filterNull(o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
/*
  接口处理函数
*/

function apiAxios(method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  // 后端要求 para 数据为 json字符串
  if (method === 'POST' || method === 'PUT') {
    if (params.hasOwnProperty('para')) {
      params.para = JSON.stringify(params.para)
    }
  }

  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    emulateJSON: true,
    withCredentials: false
  })
    .then(function(res) {
      // 接口正常返回数据，且code码是正常的情况（这里是接口能通情况，但接口业务逻辑返回的代码，按自已实际情况判断）
      if (res.data.code === 200) {
        if (success) {
          success(res.data)
        }
      } else if (res.data.code === 4001) { // 如果有登录错误或其他特殊错误码，可自行修改判断
        message.warning('警告:' + JSON.stringify(res.data.message))
      } else {
        // 其它失败的情况回调
        if (failure) {
          failure(res.data)
        } else {
          message.warning('API 错误, 请求失败')
        }
      }
    })
    .catch(function(err) {
      // 接口调不通的情况
      if (err) {
        message.error('API 错误, 请求失败')
      }
    })
}

// 导出，在其它地方调用接口
export default {
  get: function(url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function(url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function(url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function(url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  }
}

在Vue中，可以在main.js全局加载，在React中按需加载即可

Vue使用：

在main.js中全局调用

import api from './api/index.js'

// 将API方法绑定到全局
Vue.prototype.$api = api

在Vue文件中使用方法

var para = {}
para.api = 'list'
this.$api.get('apiurl', para, r => {
  console.log(r)
})

// 或者请求方式换成post等
this.$api.post('apiurl', para, r => {
  console.log(r)
})

this.$api.put('apiurl', para, r => {
  console.log(r)
})


this.$api.delete('apiurl', para, r => {
  console.log(r)
})

React引用：

import Api from '../api/Index';

使用样例：

  componentDidMount() {
    this.getData(res => {
      this.setState({
         list: res.data.list
      });
    });
  }

  getData = callback => {
    const para = {}
    para.api = 'list'
    Api.get('appurl', para, r => {
      callback(r);
    })
  }


// 其它请求方法，也和Vue中的样例一样， 一下方法名即可
Api.post('appurl', para, r => {
   callback(r);
})

Api.put('appurl', para, r => {
   callback(r);
})

Api.delete('appurl', para, r => {
   callback(r);
})