axios 源码学习

目录结构

其中,lib/adapters 是具体发起请求的对象,分为两个文件 http.js,xhr.js;http 适用于 node.Js 环境; xhr.js 适用于 浏览器环境;

xhr.js 采用 XMLHttpRequest 对象创建,整体遵循 这个文件中的四步;

module.exports = function bind(fn, thisArg) {
  return function wrap() {
    console.log('arguments--===');
    console.log(arguments);
    var args = new Array(arguments.length);
    for (var i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }
    return fn.apply(thisArg, args);
  };
};

这个函数的作用是 用来,改变 fn 的执行的作用域的;

无效写法

import Vue from "vue";
import axios from "axios";

axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// 添加响应拦截器
axios.interceptors.response.use(
  function (res) {
    return res;
  },
  function (error) {
    // 对响应错误做点什么
    const err = error.response.data;
    if (err.status_code === 417) {
      alert(err.message);
    } else if (err.status_code === 422) {
      for (const item in err.errors) {
        alert(err.errors[item][0]);
      }
    } else {
      alert(err.message ? err.message : "提交失败");
    }
    return Promise.resolve(error.response);
  }
);

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL
})
const socialInstance = axios.create({
  baseURL: process.env.VUE_APP_SOCIAL_BASE_URL
})

export default axios;

Vue.prototype.$axios = instance;
Vue.prototype.$socailAxios = socialInstance;

怎样优化,怎能实现上述的写法呢?

待解决

给 axios 更改参数的几种形式?

本质都是修改 axios 实例的 defaults 属性内容,而实现方式都是通过 Axios.prototype.request来实现的;

  • 通过实例 defaults 属性

    axios.defaults.timeout=10000;
  • 通过直接给实例传参

    axios({
      timeout:10000
    })
  • 通过 request 来配置

    axios.request('/getUser',{
      timeout:10000
    })
  • 通过 method 别名配置

    axios.get('/getUser',{
      timeout:10000
    })

axios.create() 本身 是返回一个函数,怎样给这个函数 添加 诸如 interceptors 等属性?

通过如下

var context = new Axios(defaultConfig);
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);
  utils.extend(instance, context);

  return instance;

拦截器怎样触发的呢?

通过 promise 链

var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
this.interceptors.request.forEach(function unshiftRequestInterceptors(
  interceptor
) {
  chain.unshift(interceptor.fulfilled, interceptor.rejected);
});

this.interceptors.response.forEach(function pushResponseInterceptors(
  interceptor
) {
  chain.push(interceptor.fulfilled, interceptor.rejected);
});

while (chain.length) {
  promise = promise.then(chain.shift(), chain.shift());
}

return promise;

通过上述代码,实现了类似如下效果:

Promise.resolve(config).then(interceptors.request).then(dispatchRequest).then(interceptors.response).then(...)

cancelToken 怎样实现 同一个 cancel token 取消多个请求的?

通过 cancelToken 这块的代码,对于面向对象编程理解深了一步;各个文件中间,通过暴露的接口进行 通信(比如 xhr.js 和 axios 各种配置的通信);面向对象可以更好的解释这个通信过程;而如果使用 面向过程的编程方式,估计会乱成一锅粥

原文链接:segmentfault.com

上一篇:element-ui 远程搜索组件el-select在项目中组件化
下一篇:Promise 使用心得

相关推荐

  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    4 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    3 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前
  • 项目过程中的小学习

    1.将多个同类元素分行,每一行有两个或者多个元素,可用li标签实现此 效果如下: clipboard.png(https://img.javascriptcn.com/a1466689a56d4...

    2 年前
  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    7 个月前
  • 面试还问redux?那我从头手撸源码吧(中间件篇)

    昨天的文章手写了一版redux的核心源码(https://segmentfault.com/a/1190000016799698),redux库除了数据的状态管理还有一块重要的内容那就是中间件,今天我...

    2 年前
  • 零基础该如何学习前端开发?

    这种问题经常出现,我以前也学过不少类似的文章。但随着我做课程,讲课的时间日渐长久,我对于这个问题的理解和体会也在不断的变化着。 之前我对于这个问题,最直接的回复就是,零基础啊,那你就学呗,从ht...

    1 年前

官方社区

扫码加入 JavaScript 社区