TS的请求封装

首先安装axios npm install axios

新建request.ts 进行初始设置并设定请求和相应拦截器

import axios from 'axios'  
  
const request = axios.create({  
baseURL: 'http://127.0.0.1:8080/',  
timeout: 80000,  
withCredentials: false  
// headers: {  
// 'Content-Type': 'application/json',  
// 'token': x-auth-token',  
// 'X-Requested-With': 'XMLHttpRequest',  
// },  
})  

request.interceptors.request.use(  
config => {  
const token = localStorage.getItem('token')  
if (token) {  
config.headers = { Authorization: 'Bearer ' + token }  
}  
return config  
},  
error => {  
Promise.reject(error).then(r => { console.log(r) })  
}  
)  
  
request.interceptors.response.use(  
response => {  
return response.data  
},  
error => {  
return Promise.reject(error)  
}  
)  
export default request

新建api.ts使用这个封装

定义接口格式： export  const  自定义接口名  =  (形参)  =>  instance.方法(路径，后端要的参数);

import instance from './request'  
import { RegisterParams } from '@/request/params/RegisterParams'  
import { ResponseBase } from '@/request/response/responseBase'  
import { LoginResponse } from '@/request/response/loginResponse'  
import { AxiosResponse } from 'axios'  
import { TodayInfo } from './response/TodayInfo'  
  
export const LogoutAPI = () => instance.post('/admin/logout')  
  
export const auth = (): Promise<Map<string, string>> =>  
instance.post('/user/auth')  

export const loginAPI = (data: RegisterParams): Promise<ResponseBase<LoginResponse>> =>  
instance.post('/user/login', data)  

export const registerAPI = (data: RegisterParams): Promise<ResponseBase<string>> =>  
instance.post('/user/register', data)  

export const getTodayInfoAPI = (): Promise<TodayInfo> =>  
instance.get('/api/v1/users/current/statusbar/today')




 
// post请求 ，没参数
export const LogoutAPI = () => instance.post("/admin/logout");
 
// post请求，有参数
export const loginAPI = (data: IloginParam): dataAPI<ILoginData> =>
  instance.post("/admin/login", data);
 
// post请求 ，没参数，但要路径传参
export const StatusAPI = (data:IupdateNavStatus): dataAPI<number> =>
  instance.post(`/productCategory?ids=${data.id}&navStatus=${data.navStatus}`);
 
 
//  get请求，没参数，
export const FlashSessionListApi = (): dataAPI<{}[]> =>
  instance.get("/flashSession/list");
 
// get请求，有参数，路径也要传参
export const ProductCategoryApi = (params: IUseTableParam): dataAPI<any> =>
  instance.get(`/productCategory/list/${params.parentId}`, { params });
 
// get请求，有参数，
export const AdminListAPI = (
    params: IAdminListParam
): dataAPI<AdminListDate> => instance.get("/admin/list", { params });

使用：

getTodayInfoAPI().then((res) => {  

})