介绍
Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API，可以发送各种类型的请求（如 GET、POST、PUT、DELETE 等），并处理响应数据。Axios 在前端工程化项目中有着广泛的应用，概率高达 99% 会优先选择使用。
使用
要使用axios进行HTTP请求的发送，首先我们需要安装axios库。
1、安装
安装命令（在前端开发工具控制台输入命令）三种方式
使用 npm: npm install axios
使用 yarn: yarn add axios
使用 pnpm: pnpm install axios
2、在项目在使用
首先，我们在src目录下创建一个文件夹来plugin存储第三方库配置。 创建全局axios实例，并配置请求拦截器
axios.ts/axios.js 文件内容
// 创建实例时配置默认值
import axios from "axios";
import {ref} from "vue";
const myAxios = axios.create({
baseURL: "http://localhost/api"; //请求的基本路径
});
// myAxios.defaults.withCredentials = true; //开启携带cookie
// 添加请求拦截器（请求发送之前对axios默认配置进行修改，例如添加请求头等）
myAxios.interceptors.request.use(function (config) {
//在请求头中携带身份认证字段Authorization
// config.headers.Authorization = localStorage.getItem("Authorization")
return config;
})
// 添加响应拦截器（可用来进行未登录跳转）
myAxios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
console.log("我收到请求了")
//跳转到登录页
if(response?.data?.code === 40100||response?.data.code==="500"){
const redirectUrl = window.location.href;
window.location.href =`#/user/login?redirect=${redirectUrl}`
}
// 对响应数据做点什么
return response.data;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
console.log('error',error);
return Promise.reject(error);
});
export default myAxios;
在main.ts/main.js 中引入(!!!一定要引入才能生效)
import "../src/plugin/axios"
使用
import myAxios from "../plugins/myAxios";
const testAxiosGET=async()=>{
const res = await myAxios.get(url,请求参数)
}
const testAxiosPOST=async()=>{
const res = await myAxios.post(url,请求参数)
}
axios使用参考文档
好文阅读
您阅读本篇文章共花了：
发表评论