配置/封装 axios 网络请求

1. 为什么要封装 axios ?

  1. 实际开发过程中,我们项目可能会有大量接口,而接口的URL地址可以分为好几类,如果我们使用全局配置axiosbaseURL是不太现实的。
  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);
         }
    );
    

人生人山人海人来人往,自己自尊自爱自由自在。

本文来自博客园,作者:青柠i,转载请注明原文链接:https://www.cnblogs.com/fuct/p/15364218.html

posted @ 2021-10-03 15:00  青柠i  阅读(12)  评论(0编辑  收藏  举报