request请求工具类，处理了Axios interceptor 修改response 之后的类型推导问题

最新推荐文章于 2024-05-23 15:25:32 发布

CoderHePeng

最新推荐文章于 2024-05-23 15:25:32 发布

阅读量363

点赞数

分类专栏： vue3 文章标签： vue.js typescript

本文链接：https://blog.csdn.net/autumn_later/article/details/131856621

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

request.ts

import axios, {AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig} from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

  
interface ServerData<T = any>  {
    code: number;
    data?: T;
    success?: boolean;
    msg?: string;
    total?:number;
    start?:number;
    size?:number;
    pages?:number;
    navigatePages?:number;
    hasPrevious?:boolean;
    hasNext?:boolean;
  }

const service:AxiosInstance = axios.create({
    baseURL:'http://localhost:8092/test',
    timeout: 5000,
    headers:{ 
        "Content-Type": "application/json; charset=UTF-8",
        "Access-Control-Allow-Origin": "*"
    },
});

declare module 'axios' {
    export interface AxiosResponse<T = any> extends ServerData<T> {}
}


service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        if(config.headers){
            var token = localStorage.getItem("token")
            if(token){
                config.headers["token"] =  token
            }
        }
        return config;
    },
    (error: AxiosError) => {
        console.log(error);
        return Promise.reject();
    }
);



service.interceptors.response.use(
    (response) => {
        //此处的success是成功请求到后端接口,并不是请求数据成功了
        if (response.status && response.status == 200) {
             // 返回后台响应的数据
            console.log("=======返回后台响应的数据======");
            console.log(response);
            switch(response.data.code){
                case 200:
                    return response.data;
                case 401:
                    ElMessage.error({ message: response.data.msg });
                    useRouter().push({ name: 'Login' })
                    return Promise.reject(response.data.msg);
                default:
                    ElMessage.error({ message: response.data.msg });
                    return Promise.reject(response.data.msg);
            }
        }else{
            ElMessage.error({ message: "请求出错！" }); 
            return Promise.reject("请求出错！");
        }
    },
    (error) => {
        console.log("返回error")
        const msg = error.response.data
        console.log(msg)
        ElMessage.error(msg)
        return Promise.reject(error.response)
    }
  )
export default service;

index.ts

import request from '../utils/request';

export const getUserList = (params:any) => {
    return request({
        url: '/api/account/getAccountList',
        method: 'get',
        params:params
    })
}

页面中使用，只选取了相关代码

<template>
	<div>
		...
	</div>
</template>

<script setup lang="ts" name="userList">

import { getUserList  } from '../../api/index';

// 获取表格数据
const getData = () => {
	getUserList({
		pageNum:query.pageNum,
		pageSize:query.pageSize
	}).then(res => {
		console.log("userlist:")
		console.log(res)
		tableData.value = res.data;
		pageTotal.value = res.total || 10;

	});
};
getData();

</script>

<style scoped>
	...
</style>

参考了Axios interceptor 修改了 response 之后的类型推导-慕课网