axios的封装

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.项目结构