Axios封装技术

1. 安装axios

        首先，确保你的项目中已经安装了axios。如果还没有安装，可以通过npm来安装

                npm install axios

2. 创建axios实例

        创建一个axios实例，允许你自定义配置（如基础URL、请求超时时间等）

import axios from 'axios';
const httpInstance= axios.create({
    timeout: 10000,
});

3. 请求拦截器

        在发送请求之前，需要添加一些通用的处理逻辑。

httpInstance.interceptors.request.use(config => {
    return config;
},error=>Promise.reject(error))

4. 响应拦截器

        在接收到响应后，需要进行一些处理，比如根据HTTP状态码判断是否成功、处理错误信息等

httpInstance.interceptors.response.use(res => res.data,error=>{
    if(error.response.status === 401){
        ElMessage.error('请先登录')
        //跳转登录页面

    }else{
        ElMessage({type:'error',message:'请重新登录'+error})
    }
    return Promise.reject(error)
export default httpInstance  //对外暴露，用于在其他位置调用

5. 封装具体的API

        可以根据项目的需求，封装具体的API请求方法

//api/textApi,js
import httpInstance from "@/utils/HTTP";
export function getHomeNav(){
    return httpInstance({
        url:'http://localhost:50/user/getalluser'
    })
}

6.使用封装的API

        可以在项目的任何地方导入并使用这些封装好的API方法了

import{getHomeNav} from '@/apis/testApi.js'
getHomeNav().then((res:any)=>{
    console.log(res)
})