axios.js 源码分析

axios.js 源码分析

axios.js --> Axios.js --> InterceptorManager.js --> dispatchRequest.js --> transformData.js --> adapters

  1. axios 为什么可以在浏览器和服务器上同时运行?

    答:因为axios使用了适配器模式,在node中引入http模块请求,在浏览器中使用xhr对象进行请求

  2. axios 如何实现请求和相应的修改

    答:通过一个拦截器(InterceptorManager)实现,拦截器其实就是一个观察者模式,通过use添加,通过eject删除,通过forEach进行notify

  3. 拦截器和转换器的区别?

    答:拦截器主要是用来对请求和响应的数据进行一些处理,转化器则是将请求和响应的数据进行一些转换,比如转换请求参数,JSON相应数据等

  4. axios常用配置
import axios from ‘axios‘

// 设置通用header
axios.defaults.headers.common[‘X-Requested-With‘] = ‘XMLHttpRequest‘; // xhr标识

// 设置某种请求的header
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=utf-8‘;

// 设置某次请求的header
axios.get(url, {
  headers: {
    ‘Authorization‘: ‘whr1‘,
  },
})

//跨域携带cookie
axios.defaults.withCredentials = true;

// 设置超时
axios.defaults.timeout = 3000;

// 超时处理
axios().catch(error => {
  const { message } = error;
  if (message.indexOf(‘timeout‘) > -1){
    // 超时处理
  }
})

原文地址:https://www.cnblogs.com/daoket/p/10205084.html

时间: 01-01

axios.js 源码分析的相关文章

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

html5 Sortable.js 源码分析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上    ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上    ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上    ondrop 事件:被

layui.js源码分析

/*! @Title: Layui @Description:经典模块化前端框架 @Site: www.layui.com @Author: 贤心 @License:MIT */ ;!function(win) { "use strict"; var Lay = function() { this.v = '1.0.9_rls'; //版本号 }; Lay.fn = Lay.prototype; var doc = document, config = Lay.fn.cache = {

MVVM大比拼之vue.js源码精析

VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准 入口 Vue 的入口也很直白: ? 1 var demo = new Vue({ el: '#demo', data: { message: 'Hello V

Webpack-源码三,从源码分析如何写一个plugin

经过上一篇博客分析webpack从命令行到打包完成的整体流程,我们知道了webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展.社区里很多webpack的plugin,但是具体到我们的项目并不一定适用,这篇博客告诉你如何入手写一个plugin,然后分析源码相关部分告诉你你的plugin是如何工作.知其然且知其所以然. 该系列博客的所有测试代码. 从黑盒角度学习写一个plugin 所谓黑盒,就是先不管webpack的plugin如何运作,只去看官网介绍. Compiler和Co

转:Mongodb源码分析之Replication模式

原文出处:http://www.cnblogs.com/daizhj/archive/2011/06/13/mongodb_sourcecode_rep mongodb中提供了复制(Replication)机制,通过该机制可以帮助我们很容易实现读写分离方案,并支持灾难恢复(服务器断电)等意外情况下的数据安全. 在老版本(1.6)中,Mongo提供了两种方式的复制:master-slave及replica pair模式(注:mongodb最新支持的replset复制集方式可看成是pair的升级版,

Cordova Android源码分析系列一(项目总览和CordovaActivity分析)

PhoneGap/Cordova是一个专业的移动应用开发框架,是一个全面的WEB APP开发的框架,提供了以WEB形式来访问终端设备的API的功能.这对于采用WEB APP进行开发者来说是个福音,这可以避免了原生开发的某些功能.Cordova 只是个原生外壳,app的内核是一个完整的webapp,需要调用的原生功能将以原生插件的形式实现,以暴露js接口的方式调用. Cordova Android项目是Cordova Android原生部分的Java代码实现,提供了Android原生代码和上层We

jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器

jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTransport, 3.类型转换器 ajaxConvert 源码结构: jQuery.extend({ /** * 前置过滤器 * @type {[type]} */ ajaxPrefilter: addToPrefiltersOrTransports(prefilters), /** * 请求分发器 *

Jquery源码分析

1.概述 jQuery是一个非常优秀的Js库,与prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发最实用的角度出发,抛除了一些中看但不实用的东西,为开发者提供一个短小精悍的类库.由于其个短小精悍,使用简单方便,性能相对高效.众多的开发者都选择Jquery来进行辅助的web开发. 在使用jquery时开发,我们也会时常碰到许多的问题,但是jquery的代码很晦涩,难起看懂,当开发时出现了问题,看不懂源码,不知道如何去排错. John Resig,Jquery