首先改變dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://127.0.0.1:3000"'//加入請求的域名
})

然後在src目錄下新建utlis,再在utlis下面新建request.js

import axios from 'axios'
import router from '@/router/index'

const service = axios.create({
    // baseURL: process.env.BASE_API,如果使用上面配置好的會出現跨域
    baseURL: '/api',//如果在config/index.js 中proxy已經做過代理配置就用代理地址  如果配置了baseURL 那麼會在請求的url最前面預設加上代表的內容 比如/api 代表http://127.0.0.1:3000, 請求中axios.get('/test') === axios.get('http://127.0.0.1:3000/test')
    timeout: 1000*120
})

// 請求攔截
service.interceptors.request.use(
    config => {
      if(token){//如果token有值才進行賦值  這個值可以是store裡面取  可以是本地快取取
         config.headers.token = '12313213'
      }
      console.log('config:', config)
      //判斷token是否生效
      return config
    },
    error => {
      console.log(error) // for debug
      Promise.reject(error)
    }
  )
  
  //響應攔截器即異常處理
service.interceptors.response.use(response => {
    console.log('攔截器裡面請求成功：', response)
    return response
}, err => {
    console.log('請求失敗:', err.response.status)
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.response.message = '錯誤請求'
          break;
        case 401:
          err.response.message = '未授權，請重新登入'
          Router.replace({ path: '/login' });
          break;
        case 403:
          err.response.message = '拒絕訪問'
          break;
        case 404:
          err.response.message = '請求錯誤,未找到該資源'
          break;
        case 405:
          err.response.message = '請求方法未允許'
          break;
        case 408:
          err.response.message = '請求超時'
          break;
        case 500:
          err.response.message = '伺服器端出錯'
          router.replace('/index')//跟 router.push 很像，唯一的不同就是，它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
          break;
        case 501:
          err.response.message = '網路未實現'
          break;
        case 502:
          err.response.message = '網路錯誤'
          break;
        case 503:
          err.response.message = '服務不可用'
          break;
        case 504:
          err.response.message = '網路超時'
          break;
        case 505:
          err.response.message = 'http版本不支援該請求'
          break;
        default:
          err.response.message = `連線錯誤${err.response.status}`
      }
    } else {
      err.response.message = "連線到伺服器失敗"
    }
      console.log('err:', err.response)
      return Promise.resolve(err.response)
})

export default service
 

config/index.js proxy配置

proxyTable: {
        '/api': {
        target: 'http://127.0.0.1:3000', // 介面的域名
        // secure: false,  // 如果是https介面，需要配置這個引數
        changeOrigin: true, // 如果介面跨域，需要進行這個引數配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },

接下來封裝我們的請求js，在src目錄下新建api資料夾，在api資料夾下面新建getData.js

import request from '../utlis/request'

//模擬的一個get請求
export function fetchList(query) {
    return request({
      url: '/test',
      method: 'get',
      params: query
    })
  }

export function upload(query) {
    return request({
        url: '/upload',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        params: query
    })
}
 

最後就是在vue元件中引入使用

 import {fetchList, upload} from '../api/testRequest'

export default {
  async mounted(){
      var res = await fetchList()
      console.log('請求的值:', res)
    }
}

總結：
1.攔截請求做token檢測，不用每個請求都去處理token
2.把請求集中管理，方便維護
3.對請求錯誤轉義