封装axios函数记录

• 基于axios进行二次封装

• 统一配置, 便于管理

1. 下载axios

   yarn add axios

2. 创建utils/request.js

   // 基于 axios 封装的请求模块
   import ajax from 'axios'
   // 新建一个新的axios实例
   const axios = ajax.create({
     baseURL: 'http://123.57.109.30:8000' // 基地址
   })
   ​
   // 导出自定义函数, 参数对象解构赋值
   export default ({ url, method = 'GET', params, data, headers }) => {
     return axios({ 
       url: url,
       method: method,
       params: params,
       data: data,
       headers: headers
     })
       
   // 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
   //   return $.ajax({
   //     url: url,
   //     type: method,
   //     data: data,
   //     header: headers
   //   })
   }
   ​

小结

1. 为何要二次封装axios函数?

   为了让我们的代码更加灵活, 统一管理

2. axios.create作用?

   创建返回一个新的axios函数对象