缘由

一直以来自己写的小项目对应axios的请求都比较少，大多都是几个页面单独的axios请求所以也就没有进行过axios封装。

入职之后通过公司代码研读发现由于请求过多所以需要对axios进行封装，这儿就记录一下我的学习。

代码学习

结构

libs 中主要是封装方法

xhr.js axios封装

import axios from 'axios'

//创建实例
const request = axios.create({
  baseURL: ''
})

//buildUri 处理url方法

function xhr(option) {
    const uri = buildUri(options)
    const reqConfig = {
        method: options.method,
        url: uri,
        headers: {}
    }
    if (options.headers) {
        Object.keys(options.headers).forEach(header => {
          reqConfig.headers[header] = options.headers[header]
        })
     }
     // 对reqConfig添加一些属性比如请求头、params等
     // ...
     return request(reqConfig) //输出
}

export default xhr //导出

第一次封装完成

request.js请求 axios封装

第二次封装 导入了unit.js 封装常用方法

//request.js
const API = {
  assets: util.getAPI('assets'),
  scenes: util.getAPI('scenes'),
  maps:util.getAPI('maps'),
  styles: util.getAPI('styles'),
  tilesets: util.getAPI('tilesets'),
  sprites: util.getAPI('sprites'),
  models: util.getAPI('models'),
  tables: util.getAPI('tables'),
  databases: util.getAPI('databases'),
  catalogs: util.getAPI('catalogs')
}
//输出
export const getJSON = url =>
  xhr({
    method: 'GET',
    uri: url
  })
  
//config.js 定义运行环境
export default {
  API: window.config.API_URL,
  TITLE: window.config.TITLE,
  PUBLIC_COUNT: 'admin'
}
//unit.js
getAPI(module) {
    return `${config.API}/${module}/v1`
  }

封装后使用

//以getJSON为例子

//引入
import { getJSON } from '@/libs/request'
//使用
let { data } = await getJSON(source.url)

用对象的方式存储数据

定义config.js

export default {
  API: window.config.API_URL,
  TITLE: window.config.TITLE,
  PUBLIC_COUNT: 'admin'
}

引入的时候直接

import config from 'config.js'