Vue 中 axios 拦截器的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。
一 . 安装

npm install axios;

二 . 引入
在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
三 . 开始封装

1. 在http.js中引入axios . vue及其他

import Axios from 'axios'; // 引入axios
import { Message, Loading, Notification } from 'element-ui'
import vue from 'vue';

http.js文件全部代码如下：

import Axios from 'axios';
import store from '../store';
import { Message, Loading, Notification } from 'element-ui'
import vue from 'vue';
// 环境的切换
if (process.env.NODE_ENV == 'development') {
  Axios.defaults.baseURL = "http://10.230.39.58:33390/devops";
}
else if (process.env.NODE_ENV == 'production') {
  Axios.defaults.baseURL = "http://10.230.39.58:33390/devops";
}
// request请求拦截器
Axios.defaults.withCredentials = true
vue.prototype.$axios = Axios
//请求超时时间
// Axios.defaults.timeout = 100000;
Axios.defaults.headers.get['Content-Type'] = "application/json"
Axios.interceptors.request.use(config => {
  const Basic = sessionStorage.getItem("basicParam")
  if (Basic) {
    config.headers.Authorization = `Basic ${Basic}`;
  } else {
    console.log("无校验值");
  }
  return config;
}, error => {
  Promise.reject(error);
})
// respone返回拦截器
Axios.interceptors.response.use(
  response => {
    if (response.data.code !== 200) {
      Notification.error({
        title: '错误',
        message: response.data.message
      });
    }
    return response.data;
  }, error => {
    // Notification.error({
    //   title: '错误',
    //   message: '系统异常'
    // });
    console.log('err' + error);// for debug
    return Promise.reject(error);
  }
)

export default Axios;

api.js文件全部代码如下：

import axios from 'axios';
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function _post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        console.log(response,
          "response");

        resolve(response);
      }, err => {
        reject(err)
      })
  })
}

/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

在main.js中引入api.js

import { _post, fetch, patch, put } from './utils/api'
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$fetch = fetch;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

最后在组件里直接使用

 this.$post('/api/v2/movie/top250')
      .then((response) => {
        console.log(response)
      })
      

其他方法用法相同