在vue3中Axios的使用

介绍

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使用参考文档