axios 封装思路

src/utils/request.js

import axios from 'axios'

export const service = axios.create({
    // baseURL: process.env.BASE_API,
    //baseURL: '/api',//如果配置了baseURL 那么会在请求的url最前面默认加上代表的内容 比如/api 代表http://127.0.0.1:3000, 请求中axios.get('/test') === axios.get('http://127.0.0.1:3000/test')
    timeout: 1000*60,
    headers: {'content-Type': 'application/x-www-form-urlencoded'}
})

// request interceptor
service.interceptors.request.use(
    config => {
      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 = '未授权，请重新登录'
          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)
})

src/http/index.js

/**
 * 此页面用于封装get post update方法
 */
import {service} from '../../utlis/request'
import qs from 'qs'

/**
 * 导出request 用于外面调用
 * @param {String} url 
 * @param {Object} params 
 * @param {String} methods 
 */
export const request =  (url, params, methods) => {
    let method = methods.toLocaleUpperCase()
    if (method == 'GET') {
        return new Promise((resolve, reject) => {
            service.get(url, {params:params})
                .then(res=>{
                    console.log('封装里面的get请求结果：', res)
                    resolve(res)
                })
                .catch(err=>{
                    console.log('err:', err)
                    reject(err)
                })
        })
    } else if (method == 'POST') {
        return new Promise((resolve, reject) => {
            service.post(url, params)
                .then(res=>{
                    console.log('封装里面的post请求结果：', res)
                    resolve(res)
                })
                .catch(err=>{
                    reject(err)
                })
        })
    } else {
        service.headers = {
            'Content-Type': 'multipart/form-data'
        }
        return new Promise((resolve, reject) => {
            service.post(url, params)
                .then(res=>{
                    console.log('封装里面的update请求结果：', res)
                    resolve(res)
                })
                .catch(err=>{
                    reject(err)
                })
        })
    }
}

src/allapi/index.js

/**
 * 此页面用于封装所有api请求地址
 */
class AllApi {
    constructor(){
        this.Test = 'api/test'//测试get请求
        this.PostTest = 'api/postTest'//测试post请求
    }
}

export const Api = new AllApi()

src/server/index.js

/**
 * 此页面用于所有请求
 */
import {request} from '../http'
import {Api} from '../allapi'

/**
 * 测试get请求
 */
export const Test = data => request(Api.Test, data || {}, 'get')

/**
 * 测试post请求
 */
export const Test2 = data => request(Api.PostTest, data || {}, 'post')

.vue文件测试

<template>
    <div>
            <div @click="test">点击测试get封装</div>
            <div @click="test2">点击测试post封装</div>
    </div>
</template>
<script>
    import {Test, Test2} from '../api/server'
    export default {
        methods: {
            async test(){
                const data = await Test({name:'123',pass:'123'})
                console.log('data:', data)
            },
            async test2(){
                const data = await Test2({name:'123',pass:'123'})
                console.log('data:', data)
            }
        }
    }
</script>

最后结果：