【Vue3】封装axios请求（cli和vite）

原文作者：我辈李想
版权声明：文章原创，转载时请务必加上原文超链接、作者信息和本声明。

Vue

【Vue3】env环境变量的配置和使用（区分cli和vite）

---

---

前言

---

一、常见用法

我们将创建api文件夹，包含index.js和request.js，剩下的rule.js就是实际接口文件。

二、vue3+cli封装接口

vue3+cli的项目，配置中需要以VUE_APP开头。

1…env配置

VUE_APP_PORT = 8080

2…dev(开发环境，其他环境自己配置)

VUE_APP_API_HOST = '127.0.0.1'
VUE_APP_API_HOST = '8000'
VUE_APP_API_BASE_URL = "http://127.0.0.1:8000/api"VUE_APP_ENV = 'development'

3.vue.config.js文件

如果项目没有此文件，需要自己创建，位置参考第一部分截图。
这里的devServer配置表示代理，即将前端的host、port和路由代理至api接口。其中’/api’很重要，后边会用到。
下述代码表示将http://127.0.0.1:8080/api代理至http://127.0.0.1:8000/api)

const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,assetsDir: 'static',devServer: {// host: process.env.VUE_APP_HOST,// port: process.env.VUE_APP_PORT, //端口// https: false, //false关闭https，true为开启// open: true, //自动打开浏览器proxy: {'/api': {target: process.env.VUE_APP_API_BASE_URL,changeOrigin: true,pathRewrite: {'/api': ''}}}}
})

4.封装axios请求

4.1 在api文件夹中新建request.js

这里的baseURL: “/api"中的”/api"，与第三部的代理一致。

// 导入axios
import axios from 'axios'const request = axios.create({// baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URLbaseURL: "/api",// timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）timeout: 60000,// headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。headers: {'Accept': 'application/json','Content-Type': 'application/json','Access-Control-Allow-Origin': '*'}
})// 请求拦截器
request.interceptors.request.use(config => {// 在请求发送之前可以做一些处理，比如添加请求头等return config;},error => {// 请求错误处理return Promise.reject(error);}
);// 响应拦截器
request.interceptors.response.use(response => {// 在这里可以对响应数据进行处理return response.data;},error => {// 响应错误处理return Promise.reject(error);}
)export default request

4.2 新建接口rule.js

import request from './request.js'export function getrules(params) {return request({url: '/rule/rule/',method: 'get',params: params})
}export function postrule(data) {return request({method: 'post',data: data,url: '/rules'})
}export function updaterule(id, data) {return request({method: 'post',data: data,url: '/rules/${id}'})
}export default {getrules,postrule,updaterule,
}

4.3 新建index.js

import rule from './rule.js'export default {rule,
}

4.4 App.vue引用

<script setup>import {rule} from '@/api/rule.js'console.log('hello script setup2', rule.getrules())
</script>

4.5 全局使用api

修改项目的main.js文件，加载全局属性

import {createApp
} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import router from "./router";
import store from "./store";
import api from "./api";const app = createApp(App)
app.config.globalProperties.$api = api // 挂载全局app.use(router).use(store).use(ElementPlus).mount('#app')

vue3一般的script

<script>// 请求rulesfunction get() {
console.log(this.$api.rule.getrules())}
</script>

vue3一般的script+setup

<script setup>// 请求rulesconst cns = getCurrentInstance()console.log(cns.appContext.config.globalProperties.$api)console.log('hello script setup')function get() {
console.log(cns.appContext.config.globalProperties.$api.rule.getrules())}
</script>