目录
前言
配置Axios实例
页面使用
总结
前言
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求,支持请求和响应的拦截、转换、取消请求等功能。关于它的作用:
发起 HTTP 请求: Axios 提供了丰富的 API,使得在浏览器和 Node.js 中发起 HTTP 请求变得非常容易。可以发送 GET、POST、PUT、DELETE 等不同类型的请求。
Promise 风格: Axios 使用 Promise 风格的 API,使得在异步请求中更容易处理数据和错误。可以使用
.then()
处理成功的响应,使用.catch()
处理错误。拦截请求和响应: 可以在请求和响应被发送或接收之前进行拦截处理。这使得在请求发送前或响应返回后可以进行一些全局的处理,比如添加请求头、处理错误等。
自动转换 JSON 数据: Axios 在接收到响应数据时,会自动将 JSON 字符串转换为 JavaScript 对象。这样可以方便地处理和操作服务器返回的 JSON 数据。
取消请求: Axios 允许你创建一个取消请求的令牌,以便在需要时取消尚未完成的请求。这在处理组件销毁或用户导航时非常有用,可以避免不必要的请求。
全局配置: 可以配置全局的默认值,例如基础URL、超时时间等,以便在整个应用程序中使用相同的设置。
处理请求和响应数据: 可以在请求和响应时对数据进行转换和处理。这包括序列化请求数据、解析响应数据等。
上传和下载进度: Axios 提供了上传和下载进度的事件,可以监视请求和响应的进度。这对于实时显示进度条等功能非常有用。
总体而言,Axios是一个强大而灵活的工具,可以简化和优化HTTP请求的处理,是前端开发中常用的网络请求库之一,并且当在Vue.js 3项目中使用Axios时,可以通过全局设置来配置Axios实例,以便在整个应用程序中共享相同的请求和响应逻辑,比如500或者401时,系统的一些操作。
配置Axios实例
前提,需要先安装axios:
npm install axios
如下:
开始配置,先在项目的一个文件夹下某创建一个文件,里面进行Axios 实例配置,通常在src/utils下,一般内容有:
import axios from 'axios';// 创建 Axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_URL, // 使用环境变量配置 baseURLtimeout: 5000, // 设置请求超时时间
});// 请求拦截器
service.interceptors.request.use((config) => {// 在请求发送前可以进行一些配置,例如添加认证信息等config.headers['X-Auth-Token'] = 'your_token'; // 示例:添加认证信息return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 在响应返回后,可以进行一些处理,例如判断是否需要更新令牌等// ...return response;},(error) => {// 处理响应错误// ...return Promise.reject(error);}
);export default service;
上面是比较基础的,可以在此基础上进行自定义的操作,比如我下面这种:
axios-req.ts
import axios from 'axios'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useBasicStore } from '@/store/basic'//使用axios.create()创建一个axios请求实例
const service = axios.create()
let loadingInstance: any = null //loading实例
let tempReqUrlSave = ''
let authorTipDoor = trueconst noAuthDill = () => {authorTipDoor = falseElMessageBox.confirm('请重新登录', {confirmButtonText: '重新登录',closeOnClickModal: false,showCancelButton: false,showClose: false,type: 'warning'}).then(() => {useBasicStore().resetStateAndToLogin()authorTipDoor = true})
}//请求前拦截
service.interceptors.request.use((req: any) => {const { token, axiosPromiseArr }: any = useBasicStore()//axiosPromiseArr收集请求地址,用于取消请求req.cancelToken = new axios.CancelToken((cancel) => {tempReqUrlSave = req.urlaxiosPromiseArr.push({url: req.url,cancel})})//设置token到headerif (token) req.headers['X-Auth-Token'] = token//如果req.method给get 请求参数设置为 ?name=xxxif ('get'.includes(req.method?.toLowerCase()) && !req.params) req.params = req.data//req loading// @ts-ignoreif (req.reqLoading ?? true) {loadingInstance = ElLoading.service({lock: true,fullscreen: true,// spinner: 'CircleCheck',text: '数据载入中...',background: 'rgba(0, 0, 0, 0.1)'})}return req},(err) => {//发送请求失败Promise.reject(err)}
)
//请求后拦截
service.interceptors.response.use((res: any) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}//download fileif (res.data?.type?.includes("sheet")) {return res}const { code, msg } = res.dataconst successCode = [0,200,20000]const noAuthCode = [401,403]if (successCode.includes(code)) {return res.data} else {//authorTipDoor 防止多个请求 多次alterif (authorTipDoor) {if (noAuthCode.includes(code)) {noAuthDill()} else {// @ts-ignoreif (!res.config?.isNotTipErrorMsg) {ElMessage.error({message: msg,duration: 2 * 1000})} else {return res}return Promise.reject(msg)}}}},//响应报错(err) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}ElMessage.error({message: err,duration: 2 * 1000})return Promise.reject(err)}
)
//导出service实例给页面调用 , config->页面的配置
export default function axiosReq(config) {return service({baseURL: import.meta.env.VITE_APP_BASE_URL,timeout: 8000,...config})
}
之后我们可以在api文件夹下新建一个user.ts,放一些API。就像这样:
import axiosReq from '@/utils/axios-req'//登录
export const loginReq = (subForm) => {return axiosReq({url: '/login',method: 'post',data: subForm})
}//退出登录
export const loginOutReq = () => {return axiosReq({url: '/loginOut',method: 'post'})
}
页面使用
这里以登录页为例
登录页面发送请求,一般会发送用户账号密码,然后获取到一个token,所以我一般这样用:
import { loginReq } from '@/api/user'const loginFunc = () => {loginReq({username: subForm.keyword,password: subForm.password}).then(({ data }) => {elMessage('登录成功')basicStore.setToken(data?.token)router.push('/')}).catch((err) => {tipMessage.value = err?.msg}).finally(() => {subLoading.value = false})
}
总结
如果想在Vue全局使用的话,可以用provide
和inject
来在整个应用程序中提供和注入Axios实例。
import { createApp } from 'vue'; import App from './App.vue'; import request from '@/utils/request';const app = createApp(App);// 提供Axios实例 app.provide('request', request);app.mount('#app');
页面使用:
export default {inject: ['request'],methods: {fetchData() {this.request.get('/api/data').then(response => {// 处理响应数据}).catch(error => {// 处理请求错误});},}, };
但是还是建议每个页面需要哪些API就引入哪些吧。
总结,aixos的全局配置会方便API管理,并且对于一些关于 token 处理和错误处理的逻辑,以及状态码的反馈都是比较方便的,根据项目需求来实现。