封装axios函数的方法
目标
- 基于axios进行二次封装
- 统一配置, 便于管理
步骤
-
下载axios
yarn add axios
-
创建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 }) }
-
使用
// 接口方法 import request from '@/utils/request' export const allListAPI = () => { return request({ url: '/xxx/xxx' }) }