购物网站怎么做推广,网站色彩运用,wordpress自动alt图片,百度搜索关键词规则在 Vue 3 的项目开发中#xff0c;使用 Axios 进行 HTTP 请求是非常常见的作法#xff0c;为了更方便开发者更高效的进行代码编写和项目的维护#xff0c;可以通过再次封装 Axios 来实现。 在本文中#xff0c;博主将详细指导你如何在自己的 Vue 3 项目中使用 Axios 二次封… 在 Vue 3 的项目开发中使用 Axios 进行 HTTP 请求是非常常见的作法为了更方便开发者更高效的进行代码编写和项目的维护可以通过再次封装 Axios 来实现。 在本文中博主将详细指导你如何在自己的 Vue 3 项目中使用 Axios 二次封装 request 请求。
1.安装 Axios 首先确保我们的 Vue 3 项目已经安装了 Axios 。 如果尚未安装 Axios 则可以定位到项目根目录下 (与src目录同级) 运行命令行 # 使用 npm 包管理器
npm install axios# 使用 yarn 包管理器
npm add axios# 使用 pnpm 包管理器
pnpm install axios 随后我们查看 package.json 配置文件中是否包含了 Axios 的配置信息 2.创建请求封装模块 在项目中创建一个单独的模块用来封装 Axios 请求。(博主这里是 src/utils/request.ts)
第一步创建一个新的 Axios 实例
/* request.ts 这里博主用的是 TypeScript */// 引入 Axios 库的功能AxiosInstance 是 Axios 中自带的接口类型
import axios, { AxiosInstance } from axios;
import { ElMessage, ElMessageBox } from element-plus; // 按需引入 Element-Plus 组件// 第一步创建一个新的 Axios 实例
const service: AxiosInstance axios.create({// 这里博主直接引用了开发环境配置文件中的路径, 也可自定义成网络地址baseURL: import.meta.env.VITE_API_URL, // 或 http://${host}:${port}timeout: 5000, // 设置请求超时一般来说为 5 秒// 设置请求头类型若非文件传输一般情况下为 jsonheaders: { Content-Type: application/json }, // 传输文件: multipart/form-data/* 自定义 Axios 的参数序列化过程* paramsSerializer 是 Axios 中的一个配置项用于定义在发送 GET 请求时如何序列化 URL 参数* serialize 是一个自定义的方法它接收一个 params 对象作为参数并返回一个字符串* 在这里它使用了 qs可能是 querystring 库来将参数对象 params 序列化为一个 URL 查询字符串* 这里的 qs.stringify 函数是一个用于序列化对象为 URL 查询字符串的方法*/paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });}}
})
第二步创建请求拦截器
// request.ts 文件中/** 已经完成了第一步*/// 第二步创建请求拦截器
service.interceptors.request.use((config) {// 这里可以在我们发送 request 网络请求前为我们的 request 请求做一些配置// 例如将 token 携带在请求头中config.headers![Authorization] Token ${Session.get(token)};return config},(error) {// 错误调试return Promise.reject(error)}
) 第三步创建响应拦截器
/* request.ts 文件中 *//** 已完成第一步** 已完成第二步*/// 第三步创建请求拦截器
service.interceptors.response.use((response) {// 在这里你可以对从后端拿到的数据进行处理const res response.data;if (res.code 400 || res.code 401 || res.code 403) {// 如果没有权限可以清除浏览器中缓存的 session 信息Session.clear(); // 清除浏览器全部临时缓存window.location.href /; // 去登录页ElMessageBox.alert(你已被登出请重新登录, 提示, {}).then(() { }).catch(() { });return Promise.reject(service.interceptors.response);} else {return res;}},(error) {// 对响应错误做点什么if (error.message.indexOf(timeout) ! -1) {ElMessage.error(网络超时);} else if (error.message Network Error) {ElMessage.error(网络连接错误);} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error(接口路径找不到);}return Promise.reject(error);}
) 第四步导出 Axios 实例
/* request.ts 文件中 *//** 已完成了上述三个步骤*/// 导出 axios 实例
export default service;
完整代码如下
import axios, { AxiosInstance } from axios;
import { ElMessage, ElMessageBox } from element-plus;
import { Session } from //utils/storage;
import qs from qs;// 配置新建一个 axios 实例
const service: AxiosInstance axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { Content-Type: multipart/form-data },paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });},},
});// 添加请求拦截器
service.interceptors.request.use((config) {// 在发送请求之前做些什么 tokenif (Session.get(token)) {config.headers![Authorization] DavyJonesZ ${Session.get(token)};}return config;},(error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use((response) {// 对响应数据做点什么const res response.data;if (res.code res.code ! 0) {// token 过期或者账号已在别处登录if (res.code 401 || res.code 4001) {Session.clear(); // 清除浏览器全部临时缓存window.location.href /; // 去登录页ElMessageBox.alert(你已被登出请重新登录, 提示, {}).then(() { }).catch(() { });return Promise.reject(service.interceptors.response);} else {return res;}} else {return res;}},(error) {// 对响应错误做点什么if (error.message.indexOf(timeout) ! -1) {ElMessage.error(网络超时);} else if (error.message Network Error) {ElMessage.error(网络连接错误);} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error(接口路径找不到);}return Promise.reject(error);}
);// 导出 axios 实例
export default service;3. 使用 完成上述对于 Axios 的二次封装后我们就可以在其他地方进行调用了
/* Vue 3 接口工具类login.ts 文件中 */
import request from //utils/request;// Login Api
export function login(data: object) {return request({url: /user/login,method: POST,data})
} 最后只需要在Vue组件中引入 login.ts 文件并调用其 login 方法就可以实现与后端接口的通信啦(大功告成)
