vue axios 封装

首先改变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.对请求错误转义