封装axios函数

封装axios函数的方法

目标

• 基于axios进行二次封装
• 统一配置, 便于管理

步骤

1. 下载axios

   yarn add axios
   

2. 创建utils/request.js

   // 导入
   import axios from 'axios'
   // 新建一个新的axios实例
   const instance = axios.create({
     // 配置baseURL 超时时间配置
   })
   
   // 导出自定义函数, 参数对象解构赋值
   export default ({ url, method, params, data, headers }) => {
     return instance({ 
       url,
       method,
       params,
       data,
       headers
     })
       
   // 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
       if (method.toUppercase() === 'GET') {
        // 自己把params参数拼接在url?后面
      }
      return $.ajax({
        url: url,
        type: method,
        data: data,  // 没有params
        header: headers
      })
   }
   

3. 使用

   // 接口方法
   import request from '@/utils/request'
   export const allListAPI = () => {
     return request({
       url: '/xxx/xxx'
     })
   }