ts封装axios
1.封装请求
//存放请求路径的文件 import urlConfig from '../api/index' import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import { ElMessage } from 'element-plus' import axios from 'axios' import router from '@/router'; class Request { private baseUrl: string = urlConfig.Base_URL private request(opts: {}) { const instance: AxiosInstance = axios.create({ baseURL: this.baseUrl, timeout: 3000 }) this.setInterceptors(instance) return instance(opts) } //拦截器 private setInterceptors(instance: AxiosInstance) { //请求拦截器 instance.interceptors.request.use((config) => { const token = localStorage.getItem('token') if (token && config.headers) { config.headers['Authorization'] = token; } return config }) //响应拦截器 instance.interceptors.response.use((res: AxiosResponse) => { if (res.status == 200) { return Promise.resolve(res.data) } else { return Promise.reject(res.data) } }, err => { switch (err.response.status) { case 401: const instance = ElMessage.error('用户信息过期,请重新登录'); setTimeout(() => { instance.close(); router.push('/login'); }, 1000); break; default: console.warn(`status= ${status}`); break; } return Promise.reject(err); }) }
//封装get请求 public get(url: string, options?: AxiosRequestConfig) { return this.request({ url: url, method: 'get', params: options }) }
//封装post请求 public post(url: string, options: AxiosRequestConfig) { return this.request({ url: url, method: 'post', headers: { 'Content-Type':'application/x-www-form-urlencoded' }, data: options }) } } export const httpRequest = new Request()
2.请求使用案例
将请求封装成函数
import { httpRequest as axios } from '../untils/request' //接口地址 ‘/api/test’ import config from './config/user' export const login: Function = (options: {}) => axios.post(config.loginApi, options) export const test:Function = (options:{}|undefined)=>axios.get(config.test,options)
导入接口
import { login } from '../api/user' async function loginClick() { let data = new FormData() data.append('username', account.value) data.append('password', password.value) const response = await login(data) console.log('response :>> ', response); if(response.status==0){ localStorage.setItem('token',response.token) router.push('/home') } }