Vue3配置axios

步骤一，下载文件，在编辑器项目终端输入命令npm i axios

步骤二，封装axios

1，基础封装

import axios from "axios";

import { ElMessage } from "element-plus";

//创建一个可以发起请求获得响应的实例

const httpInstance = axios.create({

    timeout : 50000

})

2.配置拦截器
 

//axios请求拦截器
httpInstance.interceptors.request.use(config =>{
    return config
},e =>Promise.reject(e))

//axios响应拦截器
httpInstance.interceptors.response.use(res =>res.data,e =>{
    if(e.response.status==401){
        ElMessage.error("请登录")
        //跳转登录页面
    }else{
        ElMessage({type:'error',message:'请重新登录'+e})
    }
    return Promise.reject(e)

步骤三,创建测试文件testAPI.js 

import httpInstance from "@/utils/http"

export function getHomeNav() {

    return httpInstance({

        url:'http://10.0.11.91:91/dailyreport/getdailyreportall'//测试接口路径

    })

}

步骤四，在main.ts(main.js)文件中导入写好的测试函数：

import {getHomeNav} from '@/apis/testAPI'

getHomeNav().then((res:any)=>{

    console.log(res)

})