ts通過class類封裝axios
一、axios 安裝
npm i axios -S
二鸣驱、HttpRequest類封裝
// 文件 utils/axios.ts
import axios, {AxiosInstance, AxiosRequestConfig} from 'axios'
class HttpRequest {
private readonly baseUrl: string;
constructor() {
this.baseUrl = 'http://localhost:3000'
}
getInsideConfig() {
const config = {
baseURL: this.baseUrl,
headers: {
//
}
}
return config
}
// 請求攔截
interceptors(instance: AxiosInstance, url: string | number | undefined) {
instance.interceptors.request.use(config => {
// 添加全局的loading..
// 請求頭攜帶token
return config
}, (error: any) => {
return Promise.reject(error)
})
//響應(yīng)攔截
instance.interceptors.response.use(res => {
//返回數(shù)據(jù)
const {data} = res
console.log('返回數(shù)據(jù)處理',res)
return data
}, (error: any) => {
console.log('error==>',error)
return Promise.reject(error)
})
}
request(options: AxiosRequestConfig) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
const http = new HttpRequest()
export default http
三吏口、接口方法封裝
// 文件api/index.ts
import http from '../utils/axios'
export const menuList =()=>{
return http.request({
url: '/users/menuList',
method: 'get'
})
}
四、頁面使用
import {menuList} from '../api/index'
getMenuList(){
menuList().then(res=>{
console.log(res)
})
}
