詳解Vue中使用Axios攔截器

//根據(jù)不同的環(huán)境更改不同的baseUrl
let baseUrl = '';
 
//開發(fā)環(huán)境下
if (process.env.NODE_ENV == 'development') {
  baseUrl = '';
 
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = '生產(chǎn)地址';
}
 
export {
  baseUrl,//導(dǎo)出baseUrl

import {
  baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
 
// 創(chuàng)建 axios 實(shí)例
let service = axios.create({
  baseUrl: baseUrl,//請(qǐng)求前綴
  timeout: 20000, // 請(qǐng)求超時(shí)時(shí)間
  crossDomain: true,//設(shè)置cross跨域
  withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問權(quán)限 允許跨域攜帶cookie信息
})
 
// 設(shè)置 post 默認(rèn) Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
 
  (config) => {
    // console.log()
    //下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。
    //我這里主要是做了一個(gè)蒙層的遮蓋
    // vuex.$store.commit('OPEN_LOADING');
 
 
    //判斷請(qǐng)求方式是否為POST，進(jìn)行轉(zhuǎn)換格式
    config.method === 'post'
      ? config.data = qs.stringify({...config.data})
      : config.params = {...config.params};
    // 請(qǐng)求發(fā)送前進(jìn)行處理
    return config
  },
  (error) => {
    // 請(qǐng)求錯(cuò)誤處理
    return Promise.reject(error)
  }
)
 
// 添加響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    let { data } = response;
    return data
  },
  (error) => {
    let info = {},
      { status, statusText, data } = error.response
 
    if (!error.response) {
      info = {
        code: 5000,
        msg: 'Network Error'
      }
    } else {
      // 此處整理錯(cuò)誤信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)
 
/**
 * 向外拋出service
 */
export default service