vue3中axios整体封装

• 在vue3.x版本中进行封装
• 使用promise封装post和get方法
• api作为单独模块维护
• 适配vue.config.js中proxy代理
• 结合async 和 await

1 安装

npm install axios;

2 创建http模块

在src目录下，创建request文件夹，并在该文件夹下，新建http.js文件

// 引入axios
import axios from 'axios'
// 引入qs模块，对数据进行序列化
import QS from 'qs'
// 引入message模块，toast提示
import { message } from 'ant-design-vue'
// 引入storage模块，操作token
import { session } from '@/utils/storage.js'

// 请求超时时间
axios.defaults.timeout = 10000

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = session.get('Token')
    token && (config.headers.Authorization = token)
    if(config.method.toUpperCase() === 'POST') {
      config.headers['Content-Type'] = 'application/json;charset=utf-8'
    }
    return config
  },
  error => {
    return Promise.error(error)
  })
// 响应拦截器
axios.interceptors.response.use(
  response => {
    console.log(response)
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 500:
          message.error('网错错误，请稍后再试！')
          break
        case 404:
          message.error('网错错误，请稍后再试！')
          break
        // 其他错误，直接抛出错误提示
        default:
          message.error(error.response.data.message)
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) =>{
    axios.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
/**
 * get方法，对应get请求,直接在地址后面拼串的形式
 * @param {String} url [请求的url地址]
 * @param {String} params [请求时携带的参数]
 */
export function getDynamicynamic(url, params) {
  return new Promise((resolve, reject) =>{
    const completeUrl = `${url}/${params}`
    axios.get(completeUrl, {})
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
/**
 * post方法，导出文件
 * @param {String} url [请求的url地址]
 * @param {String} params [请求时携带的参数]
 */
export function getFileUseBlobByPost(url, params = {}) {
	return new promise((resolve, reject)=> {
		axios({
	      method: 'post',
	      url,
	      data: params,
	      responseType: 'blob'
	    })
	      .then(res => {
	        resolve(res)
	      })
	      .catch(err => {
	        reject(err.data)
	      })
		})
}

3 创建单独的api模块

import { get, post, getDynamicynamic, getFileUseBlobByPost } from './http'

export const testPostApi = p => post('test1/api/login', p)

export const testGetDynamicApi = p => getDynamicynamic('test3/api/getnew', p)

export const testGetApi = p => get('demo2/api/goods', p)

export const testExportApi = p => getFileUseBlobByPost('demo1/api/export', p)

4 在业务代码中使用

<script setup >
import { onMounted } from 'vue'
import { testPostApi, testGetApi, testGetDynamicApi } from '@/request/api.js'

const testPostFun = async () => {
  const res = await testPostApi({ username: 'admin', password: 'admin' })
  console.log(res)
}
const testGetFun = async () => {
  const res = await testGetApi()
  console.log(res)
}
const testGetDynamicFun = async () => {
  const res = await testGetDynamicApi('15')
  console.log(res)
}
const testexportFun = async () => {
  const res = await testExportApi()
  console.log(res)
  const fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1]).split('=')[1].split('"')[1]
  let url = window.URL.createObjectURL(new Blob([res.data]))
  let a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.setAttribute('download', fileName)
  document.body.appendChild(a)
  a.click() //执行下载
  window.URL.revokeObjectURL(a.href) //释放url
  document.body.removeChild(a) //释放标签
}
onMounted(() => {
  testPostFun()
  testGetFun()
  testGetDynamicFun()
  testexportFun()
})
</script>

5 在vue.config.js中配置代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/test1': {
        target: 'http://www.liulongbin.top:3007/',
        pathRewrite: { '^/test1': '' },
        ws: false,
        changeOrigin: true
      },
      '/demo2': {
        target: 'https://www.escook.cn/',
        pathRewrite: { '^/demo2': '' },
        ws: false,
        changeOrigin: true
      },
      '/test3': {
        target: 'http://www.liulongbin.top:3005/',
        pathRewrite: { '^/test3': '' },
        ws: false,
        changeOrigin: true
      }
    }
  }
})

整体项目文件目录