配置/封装 axios 网络请求

1. 为什么要封装 axios ？

1. 实际开发过程中，我们项目可能会有大量接口，而接口的URL地址可以分为好几类，如果我们使用全局配置axios的baseURL是不太现实的。
2. 每类接口所需要的超时时间timeout各不相同。
3. 当服务器端接口地址改变或者参数改变，需要一个一个组件 / 页面去修改 axios 请求地址。
4. 大量的接口请求会使需要请求接口的页面代码臃肿，造成后期维护的麻烦。

2. 安装依赖

npm i -S axios

3. 封装 axios

3.1 axios 实例

// 每个实例都可以配置不用的请求基础URL和超时或者请求头等...
const instance1 = axios.create({
    baseURL: "",
    timeout: 5000
})

const instance2 = axios.create({
    baseURL: "",
    timeout: 10000,
    headers: {
        
    }
})

3.2 简单封装

import axios from "axios"

export function request(config) {
  /* 方案 1： */
  // return new Promise((resolve, reject) => {
  //     // 1. 创建axios的实例
  //     const instance = axios.create({
  // 		baseURL: "",
  // 		timeout: 5000
  // });
  //     instance(config)
  //       .then(res => {
  //         resolve(res);
  //     })
  //       .catch(err => {
  //         reject(err);
  //     })
  // })

  /* 方案 2 */
  // 1. 创建axios的实例
  const instance = axios.create({
    // 配置项
    baseURL: "",
    timeout: 5000
  });
  // 2. 直接返回网络请求
  return instance(config)
}

// 可以配置多个 axios 实例返回函数
export function request2 (config) {
  const instance = axios.create({
    // 配置项
    baseURL: "",
    timeout: 10000,
    headers: {}
  });
  return instance(config)
}

3.3 设置拦截器

import axios from "axios"
export function request(config) {
  // 1. 创建axios的实例
  const instance = axios.create({
    baseURL: "",
    timeout: 5000
  });
  // 2.1 配置请求拦截器
  instance.interceptors.request.use(
    config => {
      //可以进行的操作：
      // 1. 比如config中的信息不符合服务器要求，在此进行修改
      // 2. 进行 “请求中” 的图标展示
      // 3. 某些请求/登录，需要携带令牌（Token）
      return config
    },
    error => console.log(error);
)
  // 2.2 配置响应拦截器
  instance.interceptors.response.use(
    // 完成了
    result => {
        // console.log(result);
        // 返回响应结果，数据存储在data属性上
        return result.data
    },
    error => console.log(error)
  )
  // 3. 直接返回网络请求
  return instance(config)
}

3.4 使用

import {request} from '封装axios的地址'

request({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

4. 封装 api

4.1 封装请求路径

/**
 *  路径地址
 */
const base = {
    // 举例
    baseUrl: "http://localhost:5000",
    login: "/api/login",
    getList: "/api/getList",
    // ......
}
export default base

4.2 封装请求方法

//引入utils下的request.js
import axios from "../utils/request.js"
// 引入封装的路径
import base from "base.js"

const api = {
    /**
     *  登录
     */
    login(params) {
      return axios.post(base.baseUrl + base.login, params);
   }
    /**
     *  获取列表信息
     */
    getList(params) {
      return axios.get(base.baseUrl + base.getList, { params });
   }
}

export default api

5. 实例使用

1. 目录结构：“src/utils/request.js”

   // request.js 如上面的 #3，第三部分
   

2. 目录结构：“src/api/index.js”和“src/api/base.js”

   // base.js 存放路径，如上面#4.1
   
   // index.js 存放请求方法，如上面#4.2
   

3. 挂载到全局(main.js中)

   // 用Vue举例
   // 引入axios
   import api from "./api/index"
   // 挂载全局
   Vue.prototype.$api = api
   

4. 组件 / 页面使用

   // 例如：
   this.$api.projectList(page)   // page即为参数
       .then((res) => {
         console.log(res);
        }
   );