【Vue工程】011-Axios

【Vue工程】011-Axios

一、概述

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 axios

2、创建一个 token 状态

/src/store/token.ts

// import api from '@/api'import { defineStore } from 'pinia';const useTokenStore = defineStore(// 唯一ID'token',{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 Promise<void>((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 Promise<void>((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/list
• http://api.test.com/news/create
• http://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.get<any>('/list', {params: {page: 1,size: 10,},});
};// POST 请求
export const createNews = () => {return api.post<any>('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