1.自定义一个类完成对axios基本功能的封装
import axios from "axios";
import { BASE_URL, TIMEOUT } from './config.js'
class LZRequest {
constructor(baseURL, timeout = TIMEOUT) {
this.instance = axios.create({
baseURL,
timeout
})
}
request(config) {
return new Promise((resolve, reject) => {
this.instance.request(config).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
get(config) {
return this.request({ ...config, method: 'get' })
}
post(config) {
return this.request({ ...config, method: 'post' })
}
}
export default new LZRequest(BASE_URL, TIMEOUT)
2.将一些通用配置抽离出来放到单独的文件
export const BASE_URL = 'http://123.207.32.32:1888/api'
export const TIMEOUT = 10000
3.模块化
对每个请求配置对应的文件,在做一层封装。
import LZRequest from '../request/index.js'
export function getCityAll() {
return LZRequest.get({
url: '/city/all'
})
}
4.在index.js中将所有模块导入在导出,方便在项目中的导入
export * from './modules/city'
5.项目结构