Axios二次封装和使用

1.建议目录结构

这里我在src创建request文件夹，并创建api.ts和index.ts文件。

（因为这个项目我是用ts写的，如果你是用js,就创建api.js和index.js文件,这个是不影响的。）

2.代码

 index.ts

import axios from 'axios'
// 创建axios实例
const service=axios.create({
    baseURL:"http://localhost:8080",//用于请求的服务器 URL,自行修改
    timeout:5000,
})
// 请求拦截
service.interceptors.request.use((config)=>{
    config.headers=config.headers || {}
    if(localStorage.getItem('token')){
        config.headers.token=localStorage.getItem('token') || ""
    }
    return config
})
// 响应拦截
service.interceptors.response.use((res)=>{   
    const code:number=res.data.data.code?200:200
    console.log(code);
    if(code!=200){
        return Promise.reject(res.data)
    }
    return res.data
},(err)=>{
    console.log(err);
})
export default service

api.ts

import service from "./index";
export function getRoleList(){
    return service({
        url:"/getRoleList",
        method:"get"
    })
}

3.在页面中使用

import {getRoleList} from '../request/api'

onMounted (()=>{
     getRoleList().then((res) => {
        console.log(res);
      });
 })