首先安装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) => {
})
近期评论