vue3封装axios+Promise及代理配置

最新推荐文章于 2025-03-11 22:41:03 发布

1佳佳佳佳

最新推荐文章于 2025-03-11 22:41:03 发布

阅读量1.1k

点赞数

分类专栏：从无到有搭建vue项目 vue 文章标签： ajax vue.js proxy

本文链接：https://blog.youkuaiyun.com/ch_jia_jia/article/details/120063470

版权

本文介绍了如何在Vue3项目中封装axios，并解决跨域问题。通过创建util文件夹，建立http.js来封装axios请求，然后在main.js中引入并挂载到vue原型上。同时，详细讲解了vue.config.js中的devServer.proxy配置，用于本地开发时的接口代理，以避免跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios安装

npm install axios

在这里插入图片描述

新建一个util文件夹，用于存放工具类

新建http.js，用于封装axios请求

其中实际开发中，baseURL是设置一个值以便代理的实现，但是需要根据开发/生产环境进行动态配置，防止生产环境打包后斜体样式，访问链接依然带上baseUrl

import axios from 'axios'

const httpUtil = axios.create({
  baseURL: '/api',
  timeout: 100000
})

httpUtil.ajax = (options) => {
  return new Promise((resolve, reject) => {
    httpUtil({
      url: options.url,
      method: options.method,
      data: options.data ? options.data : null,
      params: options.params ? options.params : null
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err.data)
    })
  })
}

export default httpUtil