vue3+TS封装axios

首先大家封装axios的目的是什么呢？大多数都是为了前端本地开发的跨域代理，状态的集中处理（集体添加请求头，处理接口异常返回等等）

下面的这个呢就是axios的拦截器，可以分别配置请求拦截和响应拦截，请求拦截可以在发出请求前进行设置请求头的操作（比如token),响应拦截就是为了处理状态码之类的，比如用户登录过期，网络错误（主要为了提示用户）等等。配置好设置后记得把实例对象exprot出去哦。

import axios, {AxiosInstance, AxiosResponse, InternalAxiosRequestConfig} from "axios";
// import { h } from 'vue'
import router from "@/router";
const myAxios:AxiosInstance=axios.create({
    baseURL:'/ecomms-boot'
})
myAxios.interceptors.request.use((res:InternalAxiosRequestConfig):any=>{
    res.headers['X-Access-Token']=localStorage.getItem('token')||''
    return res
},  (error):object=> {
    return Promise.reject(error);
});

myAxios.interceptors.response.use( (response:AxiosResponse):any =>{
    if (response.data.code===403){
    }else if (response.data.code===505){
        router.replace('/login')
        localStorage.clear()
    }
    return response.data;
},  (error):any =>{
    return Promise.reject(error);
});
export default myAxios

 写好拦截后就要开始使用了。使用前呢，记得写好请求体跟返回体的interface或者type哦。

export interface InState{
    password:string,
    username:string
}
export type sd={
    success:boolean
    result:any,
    message:string
}

接下来就可以在调用axios的方法里使用类型进行限制了，记得引入封装好的axios,引入类型。

因为axios是通过promise封装的ajax,所以方法的返回类型是Promise类型，内部函数类型就是我们刚写好的sd了。当然记得把这个userLogin方法export出去。

import myAxios from "@/util/request/axiosRequest.ts";
import {sd} from "@/views/login/type.ts";

export function userLogin(data:{username:string,password:string}):Promise<sd>{
    return myAxios({
        method:'post',
        url:'/sys/login',
        data
    })
}

接下来就是页面调用了。传递所需要的请求体，接收接口的回调进行数据渲染。

可以看到

await userLogin({
password: state.password,
username: state.username
})

就是我们刚刚写好的方法。可以通过结构的方式进行数据分离。

export default defineComponent({
  name: "login",
  setup(){
    const users=user();
    const router=new (useRouter as any)
    const state:InState=reactive({
      password:'',
      username:''
    })
    async function login(): Promise<void> {
      localStorage.clear()
      const {success,result,message} = await userLogin({
        password: state.password,
        username: state.username
      })
      if (success) {
        localStorage.setItem('token',result.token)
        users.token=result.token as string
        router.replace('/main')
      }else{
        showDialog({
          title: '温馨提示',
          content:message,
          noCancelBtn: true,
        });
      }
    }
    return{
      state,login
    }
  }
})