封装Axios TS

‍

request.ts

import axios from "axios";
import { ElMessage } from 'element-plus'


//ts封装axios
const request = axios.create({
    baseURL: '/api/v1',
    timeout: 5000
})
//请求拦截
request.interceptors.request.use(

    config => {
        config.headers['Content-Type'] = 'application/json'
        let token = localStorage.getItem('token')
        config.headers['Authorization'] = token
        //console.log(config)
        return config
    },
    error => {
        console.error(error)
        return Promise.reject(error)
    }
)

//响应拦截
request.interceptors.response.use(
    res => {
        //与后端约定 操作成功响应代码
        const SUCCESSCODE = 1
        if (res.status =<span style="font-weight: bold;" class="mark"> 200) {
            console.log(res.status);
          
            if (res.data.code </span>= SUCCESSCODE) {
                return res.data
            }
            else {

                ElMessage.error(res.data.message)
                return Promise.reject(res.data)
            }
        }
    },
    error => {
        // 这里用来处理 http 常见错误，进行全局提示
        const mapErrorStatus = new Map([
            [400, '请求方式错误'],
            [401, '请重新登录'],
            [403, '拒绝访问'],
            [404, '请求地址有误'],
            [500, '服务器出错'],
        ])
        const message =
            mapErrorStatus.get(error.response.status) || '请求出错，请稍后再试'
        // 此处全局报错
        ElMessage.error(message)
        console.error(message)
        return Promise.reject(error.response)
    }
)

export default request

api.ts

import request from "./index";


//定义返回数据通用类型
interface BaseApiResponse {
  code: number
  message: string
  data: {}
}
//请求参数类型
interface UserData {
  username: string
  password: string
  remember: boolean
}
export const Login = (params: UserData):Promise<BaseApiResponse> => request({
  url: "/user/login",
  method: "post",
  data: params,
});