要被请求封装给困住了，所谓基础不牢，还是基础不牢

A鱼丸cu面
118 阅读4分钟

为什么要封装axios

image.png

这是从（前端架构带你 封装 axios，一次封装终身受益「美团后端连连点赞」 - 掘金 (juejin.cn)）这篇文章复制的请求流程图，我们便可以区分出来两块重要的内容来进行拆分： 基础请求流程 、 拦截器 。

基础请求流程

基础请求流程，我们大致可以分为三块，

一是 请求进入请求拦截前 、

二是 真正发起的请求 、

三是 请求从响应拦截出来后 。

这其中可以归为两类，一类是 针对单独接口的处理 二类是 针对所有接口需要的内容

  • 针对单独接口的处理

    • 请求前的参数处理
    • 请求后的返回值处理

  • 针对所有接口的处理

    • Post
    • Get
    • Put
    • Del

拦截器

拦截器，我们大致可以分为两类， 一类是 请求接口前的统一处理（请求拦截）  、 一类是 请求接口后的统一处理（响应拦截）

  • 请求拦截

    • 请求调整
    • 用户标识

  • 响应拦截

    • 网络错误处理
    • 授权错误处理
    • 普通错误处理
    • 代码异常处理

统一调用

随着我们的 Api 越来越多，我们可能需要给他们不同的分类，但我们并不希望每次调用都从不同的文件夹引入不同的 Api ，因此在 基础请求 + 拦截器 之外，我们还需要一个封包操作。

开发顺序

随着我们要做的内容越来越多，我们希望它有一个顺序以便于我们按部就班的开发（相信大家对开发中出现的不确定性都深恶痛绝）。
以便于我们按照流程，无意外、无惊喜 的完成此次封装。

在我们的开发中，我们基本要遵循先处理通用内容在处理个性化内容的逻辑：

  1. 针对所有接口的处理（Get）
  2. 请求拦截
  3. 响应拦截
  4. 针对单独接口的处理
  5. 封包处理
  6. 针对所有接口的处理（Post、Put、Del）

往后大佬还写了 一大堆，表示搬不动了，我这小白得从基础的开始来了，

以下代码迷迷糊糊的

// axios 有两种有两种请求方式

// 1、第一种请求方式是直接请求
// 2、第二种请求方式是先新建一个 axios 对象 并对其进行配置 然后 再请求

// 它两个之间最大的区别就是  axios 如果说 你对某一个网址 请求非常的频繁 而且 配置项都是固定 的 那么就新建一个 axios 请求
// 如果说 请求的网址 动态性比较强 比如 网址经常会变什么的  你这个请求 就直接使用 axios 去请求
// 原理 是一样的  创建一个 axios 对象  请求网址  然后 销毁这个对象
// 创建一个对象  重复使用这一个对象来请求网址
// axios 配置项
let test_axios_config = {
    baseURL: "http://127.0.0.1:6060", // 它始终添加在网址上边
    url: '/index', // 除了 request 这个请求外 其余的 这个 url 都不进行编码.
    timeout: 1500,
    method: "POST",   // 只要用方法去请求 这个参数一定会被覆盖掉的
    // 很有可能 发送一些公共性的数据 token
    // 这个环境 是 node 脱浏览器的 跟浏览一点关系都没有
    // 你们在这个 vue 里边 是可以用 localStorage 这个东西的
    // 用一个函数的自调用也可以 获取直接 用
    // localStorage.getItem()
    headers: {
        "x-path-custom-header": 'custom-header-name'
    },
    data: { name: '李雷', age: 22, sex: false },
    params: { path: 'abc', user: 123 }
}

Axios.interceptors.request.use((config) => {
    console.log(config);
    return config;
})

// Axios.get("/outer", test_axios_config);  // get 请求 除了 request 所有的 请求方式  url 都会被覆盖掉


// Axios.request(test_axios_config);

// 我想请求 几个网址

// 每一个网址都不一样，但是它们都有一个公共同点: http://127.0.0.1:6060

// let user = axios.get("http://127.0.0.1:6060/user")
// let gred = axios.get("http://127.0.0.1:6060/gred")

let baseURL= 'http://127.0.0.1:6060';

function Service(custom_config) {
    if (custom_config.url)
    {
        custom_config.baseURL = `${baseURL}/${custom_config.url}`;
        delete custom_config.url;
    }
    let config = {
        ...custom_config
    }
    console.log(config);
    return Axios.create(config)
}

// let user = Service({ url: '/index', method: 'GET'});


// GET user/id
// POST user/id
// DELETE user/id

// export let get_user = user;   // user.request()
export let delete_user = Service({ url: '/index', method: "DELETE" });
// delete_user.request()

export let user = Service({ url: 'index' });
// 你可以在这里边传输公共的配置项


// user.get('', { data: { xxx: 'aaaa'}, params: { bbb: 'xxxx' } })
// user.delete('', { data: { xxx: 'aaaa'}, params: { bbb: 'xxxx' } })

let user_get = Service({ url: 'index', method: "GET" });

export user = {
    get: ;
}

user.get()
// user 用一个 axios 对象
// 订单数据 用一个 axios 对象
// 不会出现重复的情况

// 也不能一样一个 axios  因为 很多数据都是重用的

// 现在写的这个接口  很多情况下  url 是一致的 请求商品时  它的这个 配置项也是一样的

//  请求前的拦截 还是请求后的拦截 它都是一样的.

搬运地址附上：

作者：sincenir
链接：juejin.cn/post/712457… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝