头条搜索站长平台,成都市建设网站,老房改造 装修公司,百度电话号码目录 前言 配置Axios实例 页面使用 总结 前言
Axios 是一个基于 Promise 的 HTTP 客户端#xff0c;用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求#xff0c;支持请求和响应的拦截、转换、取消请求等功能。关于它的作用#xff1a; 发起 HTTP …目录 前言 配置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实例
前提需要先安装axiosnpm 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 请求参数设置为 ?namexxxif (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/userconst 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 处理和错误处理的逻辑以及状态码的反馈都是比较方便的根据项目需求来实现。
