积极做好门户网站建设工作,网站地图页面设计,成都网站建设推广,网站提交入口链接【Vue工程】011-Axios 文章目录 【Vue工程】011-Axios一、概述1、简介2、官网3、訾博其他相关博客【axios】001-axios概述、特点、文档说明【axios】002-axios发起请求axios封装 二、基本使用1、安装2、创建一个 token 状态3、axios 封装4、使用示例设置 baseURL请求调用拦截器…【Vue工程】011-Axios 文章目录 【Vue工程】011-Axios一、概述1、简介2、官网3、訾博其他相关博客【axios】001-axios概述、特点、文档说明【axios】002-axios发起请求axios封装 二、基本使用1、安装2、创建一个 token 状态3、axios 封装4、使用示例设置 baseURL请求调用拦截器 三、其它 一、概述
1、简介
Slogan易用、简洁且高效的http库。
2、官网
官网http://www.axios-js.com/zh-cn/
文档http://www.axios-js.com/zh-cn/docs/
3、訾博其他相关博客
【axios】001-axios概述、特点、文档说明
https://blog.csdn.net/qq_29689343/article/details/109193487
【axios】002-axios发起请求
https://blog.csdn.net/qq_29689343/article/details/109193620
axios封装
https://blog.csdn.net/qq_29689343/article/details/118193238
二、基本使用 使用示例仅作为参考 1、安装
pnpm add axios2、创建一个 token 状态 /src/store/token.ts // import api from /apiimport { defineStore } from pinia;const useTokenStore defineStore(// 唯一IDtoken,{state: () ({token: localStorage.token,failuretime: localStorage.failuretime,}),getters: {isLogin: (state) {let retn false;if (state.token ! null) {const unix Date.parse(new Date().toString());if (unix state.failuretime * 1000) {retn true;}}return retn;},},actions: {login() {return new Promisevoid((resolve) {// 模拟登录成功写入 token 信息localStorage.setItem(token, 1234567890);localStorage.setItem(failuretime,(Date.parse(new Date().toString()) / 1000 24 * 60 * 60).toString(),);this.token 1234567890;this.failuretime Date.parse(new Date().toString()) / 1000 24 * 60 * 60;resolve();});},// login(data) {// return new Promise((resolve, reject) {// api.post(member/login, data).then((res) {// localStorage.setItem(token, 1234567890)// localStorage.setItem(failuretime, Date.parse(new Date()) / 1000 24 * 60 * 60)// this.token 1234567890// this.failuretime Date.parse(new Date()) / 1000 24 * 60 * 60// resolve(res)// }).catch((error) {// reject(error)// })// })// },logout() {return new Promisevoid((resolve) {// 模拟退出登录清除 token 信息localStorage.removeItem(token);localStorage.removeItem(failuretime);this.token null;this.failuretime null;resolve();});},},},
);export default useTokenStore;3、axios 封装 /src/api/index.ts import axios from axios;// import qs from qs
import router from /router/index;
import useTokenStore from /store/token;// 登录
async function toLogin() {await useTokenStore().logout();await router.push({path: /login,query: {redirect: router.currentRoute.value.fullPath,},});
}// axios 实例
const api axios.create({baseURL:import.meta.env.DEV import.meta.env.VITE_OPEN_PROXY true? /proxy/: import.meta.env.VITE_APP_API_BASEURL,timeout: 1000 * 60,responseType: json,
});/*** 请求拦截器*/
api.interceptors.request.use((config) {const tokenStore useTokenStore();/*** 全局拦截请求发送前提交的参数* 以下代码为示例在请求头里带上 token 信息*/if (tokenStore.isLogin config.headers) {config.headers.Token tokenStore.token;}// 是否将 POST 请求参数进行字符串化处理if (config.method post) {// config.data qs.stringify(config.data, {// arrayFormat: brackets,// })}return config;
});/*** 响应拦截器*/
api.interceptors.response.use(async (response) {/*** 全局拦截请求发送后返回的数据如果数据有报错则在这做全局的错误提示* 假设返回数据格式为{ status: 1, error: , data: }* 规则是当 status 为 1 时表示请求成功为 0 时表示接口需要登录或者登录状态失效需要重新登录* 请求出错时 error 会返回错误信息*/if (response.data.status 1) {if (response.data.error ! ) {// 这里做错误提示如果使用了 element plus 则可以使用 Message 进行提示// Message.error(options)return Promise.reject(response.data);}} else {await toLogin();}return Promise.resolve(response.data);},(error) {let message error.message;if (message Network Error) {message 后端网络故障;} else if (message.includes(timeout)) {message 接口请求超时;} else if (message.includes(Request failed with status code)) {message 接口${message.substr(message.length - 3)}异常;}return Promise.reject(error);},
);export default api;4、使用示例
设置 baseURL
在根目录 .env.* 文件里的 VITE_APP_API_BASEURL 这个参数就是配置 axios 的 baseURL 。
例如项目的真实接口请求地址为
http://api.test.com/news/listhttp://api.test.com/news/createhttp://api.test.com/shop/info
则可设置为 VITE_APP_API_BASEURL http://api.test.com/ 。
请求调用 常用的 get 和 post 请求可使用以下的方法 any 应该被替换成具体的类型 import api from /api;// GET 请求
export const getList () {return api.getany(/list, {params: {page: 1,size: 10,},});
};// POST 请求
export const createNews () {return api.postany(news/create, {title: 新闻标题,content: 新闻内容,});
};拦截器
在 /src/api/index.ts 文件里实例化了 axios 对象并对 request 和 response 设置了拦截器拦截器的用处就是拦截每一次的请求和响应然后做一些全局的处理。例如接口响应报错可以在拦截器里用统一的报错提示来展示方便业务开发。但因为每个公司提供的接口标准不同所以该文件拦截器部分的代码需要开发者根据实际情况去修改调整。
代码很简单首先初始化 axios 对象然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分别是请求和响应的拦截代码了。
参考代码里只做了简单的拦截处理例如请求的时候会自动带上 token 响应的时候会根据错误信息判断是登录失效还是接口报错并做相应动作。
三、其它
更复杂完整的封装可参考 vben 的封装。 https://blog.csdn.net/qq_29689343/article/details/118193238
