浏览器事件详解

Nunumaymax2023-10-31 18:09

浏览器事件模型&请求

一. 浏览器事件模型

1.DOM事件

DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移出和修改页面的某一部分，DOM 脱胎于Netscape 及微软公司创始的 DHTML（动态HTML）。但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

Netscape Navigator 4 和 IE4 分别发布于 1997 年的 6 月和 10 月发布的 DHTML，由于 IE4 和 Netscape Navigator4 分别支持不同的 DHTML，为了统一标准，W3C开始制定 DOM。1998 年 10 月 W3C 总结了 IE 和 Navigator4 的规范，制定了 DOMLevel 1即 DOM1，之前 IE 与 Netscape 的规范则被称为 DOMLevel 0 即 DOM0 。

1.1 DOM0级事件

假设页面中存在一个 btn 的按钮，并且给 btn 添加一个点击事件：

javascript 复制代码 
btn.onclick = function(){
   console.log('this is a click event')
}

事件就是用户或浏览器自身执行的某种操作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就被称为事件处理程序。

1.1.1 click事件过程

在上述的例子中，click 事件并没有像其他函数一样，必须要调用才可以执行，click 事件并不确定什么时候发生，而当浏览器发现用户点击该按钮时，浏览器就检测btn.onclick是否有值，如果有，就会执行btn.onclick.call(btn,event)，此时函数执行，call() 方法接收两个参数，第一个指向调用当前方法的对象，也就是this。

需要注意的是，指定的 this 值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的 this 会指向该原始值的自动包装对象。

另一个参数则是事件对象 event，该对象也可以通过 arguments[0] 来访问，它包含了事件相关的所有信息，如本例子中，则包含了点击事件的全部信息。可以通过给函数传参来获取事件信息。

javascript 复制代码 
btn.onclick = function(e){
   console.log('this is a click event');
   console.log(e);  //  事件对象
}

但是在 IE 中，在使用 DOM0 级方法添加事件处理程序时，event 是作 window 对象的一个属性而存在的。此时访问事件对象需要通过 window.event。

javascript 复制代码 
btn.onclick = function(){
   console.log(window.event);  //  IE中事件对象    
}

在 DOM0级中，如果想要实现一个对象绑定多个函数，可以这样实现：

javascript 复制代码 
function fn1(){
    // do something
}
function fn2(){
    // do something
}
btn.onclick = function(e){
  fn1.call(this.xxx);
  fn2.call(this.yyy);
}

1.2 DOM1级事件

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型。

1.3 DOM2级事件

W3C 后来将 DOM1 升级为 DOM2，DOM2级规范开始尝试以一种符合逻辑的方式来标准化 DOM事件。DOM0级 可以认为 onclick 是 btn 的一个属性，DOM2级 则将属性升级为队列。

DOM2级 事件定义了两个方法，用于处理指定和删除事件处理程序的操作，addEventListener()和removeEventListener()，所有的 DOM 节点中都包含这两个方法，它们都接收 3 个参数。

  1. 要处理的事件名；
  2. 作为事件处理程序的函数；
  3. 布尔值，默认为 false。
  • true 代表在捕获阶段调用事件处理程序；
  • false 表示在冒泡阶段调用事件处理程序；
lua 复制代码 
btn.addEventListener('click',function(){
  //  do something
})
btn.addEventListener('click',function(){
  //  do something else
})

addEventListener()将事件加入到监听队列中，当浏览器发现用户点击按钮时，click 队列中依次执行匿名函数。

示例：addEventListener 执行多个函数。

lua 复制代码 
function fn1(){
  //  do something
}
function fn1(){
  //  do something else
}
btn.addEventListener('click',fn1)
btn.addEventListener('click',fn2)

如果这样写，click 队列中依次fn1.call(btn,event)，fn2.call(btn,event)。

通过addEventListener()添加的事件只能由removeEventListener()来移除，并且removeEventListener()只能移除具名函数，不能移除匿名函数。

removeEventListener 无法移除匿名函数，匿名函数开辟了一个新的空间进行存储，但是因为没有名字已经找不到了！

注意：请通读MDN上关于DOM的内容。

1.3.1 IE中 DOM2级事件

IE8 及之前，实现类似addEventListener()和removeEventListener()的两个方法是attachEvent()和detachEvent()，这两个方法接受相同的两个参数。

  1. 要处理的事件名；
  2. 作为事件处理程序的函数；

IE8 之前的只支持事件冒泡，所以通过attachEvent()添加的事件处理程序只能添加到冒泡阶段。

arduino 复制代码 
btn.attachEvent('onclick',fn1)
btn.attachEvent('onclick',fn2)

当用户点击时，click 队列依次fn1.call(undefined,undefined)，fn2.call(undefined,undefined)。

与 removeEventListener() 一样，detachEvent()也只能移除具名函数，不能移除匿名函数。

javascript 复制代码 
function eventHandler() {
  console.log('xianzao);
}

btn.attachEvent('onclick', eventHandler);
btn.detachEvent('onclick, eventHandler);
javascript 复制代码 
btn.attachEvent('onclick', function() {
    console.log('xianzao);
});
// 移除无效
btn.detachEvent('onClick, function() {
    console.log('xianzao);
});

1.4 兼容处理

javascript 复制代码 
if(typeof btn.addEventListener === 'function'){
  btn.addEventListener('click',fn);
}else if(typeof btn.attachEvent === 'function'){
  btn.attachEvent('onclick',fn)
}else{
  btn.onclick=function(){
    // do something
  }
}

1.5 总结

添加事件和移除事件如下所示：

javascript 复制代码 
var btn = document.getElementById('btn');

btn.onClick = () => {
  console.log('我是DOM0级事件处理程序');
}
btn.onClick = null;


btn.addEventListener('click', () => {
  console.log('我是DOM2级事件处理程序');
}, false);
btn.removeEventListener('click', handler, false)

btn.attachEvent('onclick', () => {
  console.log('我是IE事件处理程序')
})
btn.detachEvent('onclick', handler);
  1. DOM2级的好处是可以添加多个事件处理程序；DOM0对每个事件只支持一个事件处理程序；
  2. 通过DOM2添加的匿名函数无法移除，上面写的例子就移除不了，addEventListener和removeEventListener的 handler 必须同名；
  3. 作用域：DOM0 的 handler 会在所属元素的作用域内运行，IE的handler会在全局作用域运行，this === window；
  4. 触发顺序：添加多个事件时，DOM2会按照添加顺序执行，IE会以相反的顺序执行；
  5. 跨浏览器的事件处理程序封装代码如下:
typescript 复制代码 
var EventUtil = {
  // element是当前元素，可以通过getElementById(id)获取
  // type 是事件类型，一般是click ,也有可能是鼠标、焦点、滚轮事件等等
  // handle 事件处理函数
  addHandler: (element, type, handler) => {
    // 先检测是否存在DOM2级方法,再检测IE的方法，最后是DOM0级方法（一般不会到这）
    if (element.addEventListener) {
      // 第三个参数false表示冒泡阶段
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = handler;
    }
  },

  removeHandler: (element, type, handler) => {
    if (element.removeEventListener) {
      // 第三个参数false表示冒泡阶段
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = null;
    }
  }
}

使用我们封装的 EventUtil 来添加 和 移除 事件程序：

javascript 复制代码 
// 获取元素
var btn = document.querySelector('.btn');
// 定义handler
var handler = function(e) {
  console.log('我被点击了');
}
// 监听事件
EventUtil.addHandler(btn, 'click', handler);
// 移除事件监听
// EventUtil.removeHandler(btn, 'click', clickEvent);

2.事件捕获 & 事件冒泡

事件流描述的是从页面中接收事件的顺序。

IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。

DOM2级事件规定的事件流包括三个阶段：

  • 事件捕获阶段；
  • 处于目标阶段；
  • 事件冒泡阶段；

首先发生的是事件捕获，为截获事件提供了机会。

然后是实际的目标接收到事件，处于目标状态时，按照队列 FIFO 顺序执行。

最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

  1. 当处于目标阶段，没有捕获与冒泡之分，执行顺序会按照addEventListener的添加顺序决定，先添加先执行；
  2. 使用stopPropagation()取消事件传播时，事件不会被传播给下一个节点，但是，同一节点上的其他 listener 还是会被执行；如果想要同一层级的 listener 也不执行，可以使用stopImmediatePropagation()；

如下所示，触发 list 的 click 事件，即使对事件1 取消事件传播，但是两个事件依然都会执行。

javascript 复制代码 
// list 的 捕获1
$list.addEventListener('click', (e) => {
  console.log('list capturing');
  e.stopPropagation();
}, true)
  
// list 的捕获2
$list.addEventListener('click', (e) => {
  console.log('list capturing2');
}, true)

// list capturing
// list capturing2

如果我们想只触发 事件1 的事件，可以使用 stopImmediatePropagation()。

javascript 复制代码 
// list 的 捕获1
$list.addEventListener('click', (e) => {
  console.log('list capturing');
  e.stopImmediatePropagation();
}, true)
  
// list 的捕获2
$list.addEventListener('click', (e) => {
  console.log('list capturing2');
}, true)

// 只触发了事件1
// list capturing
  1. preventDefault()只是阻止默认行为，跟JS的事件传播一点关系都没有；
  2. 一旦发起了preventDefault()，在之后传递下去的事件里面也会有效果；

2.1 测试

如果有如下示例：

xml 复制代码 
<!DOCTYPE html> 
<html> 
<head> 
  <title>Event Bubbling Example</title> 
</head> 
<body> 
  <div id="myDiv">Click Me</div> 
</body> 
</html>
  1. 事件捕获

最不具体的节点最先收到事件，而最具体的节点最后收到事件。

事件捕获实际上是为了在事件到达最终目标前拦截事件。

如果前面的例子使用事件捕获，则点击 div 元素会以下列顺序触发 click 事件：

  • document；
  • html；
  • body；
  • div；
  1. 事件冒泡

在点击页面中的 div 元素后，click 事件会以如下顺序发生：

  • div；
  • body；
  • html；
  • document；

div 元素，即被点击的元素，最先触发 click 事件；然后，click 事件沿 DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。

3.事件对象

DOM0 和 DOM2 的事件处理程序都会自动传入 event 对象。

IE中的 event对象 取决于指定的事件处理程序的方法。

IE的 handler 会在全局作用域运行，this === window，所以在IE中会有window.event、event两种情况，只有在事件处理程序期间，event 对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁。

event对象里需要关心的两个属性：

  1. target：target 永远是被添加了事件的那个元素；

  2. eventPhase：表示事件流当前处于哪一个阶段，有四个值：

  • 没有事件正在被处理：值为0；
  • 捕获阶段：值为 1；
  • 处于目标：值为 2；
  • 冒泡阶段：值为 3；

3.1 preventDefault 与 stopPropagation

  • preventDefault：比如链接被点击会导航到其href指定的URL，这个就是默认行为；

  • stopPropagation：立即停止事件在DOM层次中的传播，包括捕获和冒泡事件；

IE中对应的属性：

  • e.target => e.srcElement
  • e.preventDefault() => e.returnValue = false
  • e.stopPropagation() => e.cancelBubble = true

IE 不支持事件捕获，因而只能取消事件冒泡，但stopPropagation可以同时取消事件捕获和冒泡。

再针对上面不同类型的事件及属性进行区分，我们对上面封装的 EventUtil 进行完善：

typescript 复制代码 
var EventUtil = {
  // 添加事件处理程序：
  // element是当前元素，可以通过getElementById(id)获取
  // type 是事件类型，一般是click ,也有可能是鼠标、焦点、滚轮事件等等
  // handle 事件处理函数
  addHandler: (element, type, handler) => {
    // 先检测是否存在DOM2级方法,再检测IE的方法，最后是DOM0级方法（一般不会到这）
    if (element.addEventListener) {
      // 第三个参数false表示冒泡阶段
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = handler;
    }
  },

  // 移除事件处理程序：
  removeHandler: (element, type, handler) => {
    if (element.removeEventListener) {
      // 第三个参数false表示冒泡阶段
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = null;
    }
  },
  
  // 获取event对象
  getEvent: (event) => {
    return event ? event : window.event
  },
  
  // 获取当前目标
  getTarget: (event) => {
    return event.target ? event.target : event.srcElement
  },
  
  // 阻止默认行为
  preventDefault: (event) => {
    if (event.preventDefault) {
      event.preventDefault()
    } else {
      event.returnValue = false
    }
  },
  
  // 停止传播事件
  stopPropagation: (event) => {
    if (event,stopPropagation) {
      event.stopPropagation()
    } else {
      event.cancelBubble = true
    }
  }
}

4. 事件委托

事件委托：用来解决事件处理程序过多的问题。

DOM结构如下：

bash 复制代码 
<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>

按照传统的做法，需要像下面这样为它们添加 3 个事件处理程序：

ini 复制代码 
// 获取元素
var item1 = document.querySelector("#goSomewhere");
var item2 = document.querySelector("#doSomething");
var item3 = document.querySelector("#sayHi");

// 分别添加各自的事件处理程序
EventUtil.addHandler(item1, "click", function(event){
    location.href = "http://www.xianzao.com";
});

EventUtil.addHandler(item2, "click", function(event){
    document.title = "I changed the document's title";
});

EventUtil.addHandler(item3, "click", function(event){
    alert("hi");
});

如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。

使用事件委托 ，只需在 DOM 树中尽量最高的层次，即 DOM 树中该元素最小的公共父节点上添加一个事件处理程序。

如下面的例子所示：

csharp 复制代码 
var list = document.querySelector("#myLinks");
// 将 click 事件委托给 ul 元素，在 ul 元素上添加事件
EventUtil.addHandler(list, "click", function(event) {
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  // 根据 id 判断该节点执行的事件
  switch(target.id) {
  case "doSomething":
      document.title = "I changed the document's title";
      break;
      
  case "goSomewhere":
      location.href = "http://www.wrox.com";
      break;
      
  case "sayHi": 9 alert("hi");
    break; 
  }
}

子节点的点击事件会冒泡到父节点，并被这个注册事件处理。

最适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress。 虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。

可以考虑为 document 对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件，需要跟踪的事件处理程序越少，移除它们就越容易（移除事件处理程序关乎内存和性能）。

只要是通过 onload 事件处理程序添加的东西，最后都要通过 onunload 事件处理程序将它们移除。

二. 浏览器请求

在浏览器端发送网络请求的常见方式：

  • ajax；
  • fetch；
  • axios；

1.ajax

Asynchronous JavaScript And XML，翻译过来就是"异步的 Javascript 和 XML"。

Ajax 是js异步技术的术语，早起相关的 api 是XHR。

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

特点：局部刷新页面，无需重载整个页面。

简单来说，Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式。

1.1 手写ajax

准备工作：建议先阅读MDN。

利用 XMLHttpRequest 模块实现 Ajax。

1.1.1 创建异步对象
ini 复制代码 
let xmlHttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlHttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}

通过XMLHttpRequest构造函数创建一个异步对象xmlhttp, IE6, IE5 使用 ActiveXObject 创建，创建的这个异步对象上有很多属性和方法，常用的有：

  • onreadystatechange：监听异步对象请求状态码readyState的改变，每当readyState改变时，就会触发onreadystatechange事件；
  • readyState：请求状态码；

readyState表示异步对象目前的状态，状态码从0到4：

0: 表示请求未初始化，还没有调用 open()；

1: 服务器连接已建立，但是还没有调用 send()；

2: 请求已接收，正在处理中（通常现在可以从响应中获取内容头）；

3: 请求处理中，通常响应中已有部分数据可用了，没有全部完成；

4: 当readyState状态码为4时，表示请求已完成；此阶段确认全部数据都已经解析完毕，可以通过异步对象的属性获取对应数据；

  • status：http状态码；

http状态码中，表示成功的http状态码有：

xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304

  • responseText：后台返回的字符串形式的响应数据；
  • responseXML：后台返回的XML形式的响应数据；
1.1.2 设置 请求方式 和 请求地址

创建异步对象之后，通过open()方法设置 ajax 请求方式 和 请求地址：

xmlHttp.open("GET/POST", "ajax-get.txt", true)

  • 第一个参数：请求的类型，GET 还是 POST；
  • 第二个参数：表示请求的文件的地址 url；
  • 第三个参数：设置请求方法是不是异步async，true为异步， false为同步。AJAX 存在的意义就是发送异步请求，所以第三个参数永远传true；

注意：有个问题，就是IE中的缓存问题。

在IE浏览器中，如果通过 Ajax 发送 GET 请求，那么IE浏览器认为，同一个URL只有一个结果，如果地址没有发生变化，它就会把上一次返回的结果，直接返回。这样我们就不能实时的拿到变化后的数据。如果要想我们拿到实时数据，必须保证每次的URL都是不一样的，有两种方式：

  1. Math.random()；
  2. new Date().getTime()；

即在请求地址后面拼接上 ?t=随机数 或者 1970.01.01至当前的毫秒数， 所以在IE中通过 ajax 发送 get 请求时，可以设置请求地址为：

javascript 复制代码 
xmlHttp.open("GET", "ajax-get.txt?t=" + Math.random(), true);
// 或
xmlHttp.open("GET", "ajax-get.txt?t=" + (new Date().getTime()), true);
1.1.3 发送请求

直接通过异步对象的send()发送请求：

ini 复制代码 
xmlHttp.send();

特别注意的是，如果发送 POST 请求，使用setRequestHeader()来添加 HTTP请求头，并在 send() 方法中传递要发送的数据：

kotlin 复制代码 
xmlHttp.open("POST", "ajax_test.html"); 
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlHttp.send("fname=Henry&lname=Ford");
1.1.4 通过 onreadystatechange 监听状态变化

当异步对象的readyState发生改变，会触发onreadystatechange函数，当readyState变成为 4 时，表示当前状态是请求完毕的状态；

同时当http的响应码status为200到300之间 （包括200，不包括300）或为304时，表示ajax请求成功；反之，当http状态码不是200到300之间的数也不是304时，表示请求不成功。

监听请求状态变化代码如下：

ini 复制代码 
xmlHttp.onreadystatechange = () => {
 // 判断 当前状态改变 是 请求完毕 的状态码
 if (xmlHttp.readyState === 4) {
    if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
        console.log("成功的接收到服务器返回的数据");
    }else{
        console.log("不成功！");
    }   
 }
}
1.1.5 处理返回的结果

如果成功，可通过异步对象的responseText属性来获取服务器返回的字符串。

ini 复制代码 
if (xmlHttp.readyState === 4) { 
    if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) { 
    // 处理返回的结果
    console.log(xmlHttp.responseText);
    console.log(xmlHttp.responseXML); 
    }
}
1.1.6 与官方版的 ajax 对比 与 优化

接下来，我们来封装一个方法 ajax() 用于发送请求

封装的时候，需要注意：

  • URL当中只能出现字母、数字、下划线和ASCII码，不能出现中文，可以使用encodeURIComponent()转码；
  • 当我们使用封装的ajax() ，发送一个请求到远处服务器时，我们需要等待远程服务器去响应我们的请求，等待远程服务器将响应的结果返回给我们。但是这个响应的速度是不确定的，因为响应的速度是由本地网络和远程服务器的网速等共同决定的，所以我们不可能一直等待服务器的响应。这就需要设置超时时间 timeout。

调用我们封装的 ajax 方法如下：

php 复制代码 
ajax({
  type: 'GET',
  url: 'http://localhost:3000/posts',
  timeout: 1000,
  success: data => {
    console.log('success', data);
  },
  error: err => {
    console.log('error', err);
  },
});

至此，jQuery官方的ajax还是有一定的差异，所以还需要进一步完善。

  • 传递参数的格式：传递多个参数，需要保持传递顺序。解决方案是可以改写成传递的是一个对象，因为对象里面的值，通过对象名.属性名的形式获取，所以传递一个对象就不用考虑先后顺序；
  • 传递请求类型的大小写：jQuery官方的是大小写都可以。解决方案是可以使用toLowerCase() 或者toUpperCase()将类型转成大写或小写再对比；
  • 命名不同：我们传递的数据用的名字是obj，jQuery官方用的是data；
  • 处理返回结果：jQuery官方是传入两个回调函数，分别代表成功和失败；
  • 超时处理：jQuery官方是可以传入超时时间的。解决方案是判断外界是否传入了超时时间，如果传入了超时时间，需要使用定时器监听，若超过传入的时间值，则使用abort()中断请求；

基于上面几点我们对封装的 ajax 方法进行优化，代码如下：

javascript 复制代码 
const ajax = option => {
  // type, url, data, timeout, success, error将所有参数换成一个对象{}

  //  0.将对象转换成字符串

  // 处理传入的参数data，它是一个对象形式，但是请求是需要传递字符串
  const objToString = data => {
    let res = [];
    for (let key in data) {
      // 需要将key和value转成非中文的形式，因为url不能有中文，使用encodeURIComponent();
      res.push(encodeURIComponent(key) + ' = ' + encodeURIComponent(data[key]));
    }
    return res.join('&');
  };

  let str = objToString(option.data || {});

  //  1.创建一个异步对象xmlHttp；
  var xmlHttp, timer;
  if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else if (xmlHttp) {
    // code for IE6, IE5
    xmlHttp = new ActiveXObject('Microsoft.xmlHttp');
  }

  //  2.设置请求方式和请求地址；
  // 判断请求的类型是POST还是GET
  if (option.type.toLowerCase() === 'get') {
    xmlHttp.open(option.type, option.url + '?t=' + new Date().getTime() + '&' + str, true);
    //  3.发送请求；
    xmlHttp.send();
  } else {
    xmlHttp.open(option.type, option.url, true);
    // 注意：在post请求中，必须在open和send之间添加HTTP请求头：setRequestHeader(header,value);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    //  3.发送请求；
    xmlHttp.send(str);
  }

  //  4.监听状态的变化；
  xmlHttp.onreadystatechange = function () {
    clearInterval(timer);
    // 请求完成
    if (xmlHttp.readyState === 4) {
      if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status === 304) {
        //  5.处理返回的结果；
        option.success(xmlHttp.responseText); //成功后回调；
      } else {
        option.error(xmlHttp.responseText); //失败后回调；
      }
    }
  };

  // 6.判断外界是否传入了超时时间
  if (option.timeout) {
    timer = setInterval(function () {
      xmlHttp.abort(); // 中断请求
      clearInterval(timer);
    }, option.timeout);
  }
};

我们来测试下上面封装代码的效果。

选择json-server启动本地服务，mock数据：

json 复制代码 
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "xianzao"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "xianzao"
  }
}

执行代码：

php 复制代码 
ajax({
  type: 'GET',
  url: 'http://localhost:3000/posts',
  timeout: 1000,
  success: data => {
    console.log('success', data);
  },
  error: err => {
    console.log('error', err);
  },
});

1.2 实现 Upload 的 request 封装

针对fusion中 Upload 组件，实现自定义请求的封装。

javascript 复制代码 
function customRequest(option) {
    /* coding here */
    return {abort() {/* coding here */}};
}

<Upload request={customRequest}/>

其中，customRequest的实现如下：

scss 复制代码 
/**
 * clone from https://github.com/react-component/upload/blob/master/src/request.js
 */

function getError(option, xhr, msg) {
    msg = msg || `cannot post ${option.action} ${xhr.status}'`;
    const err = new Error(msg);
    err.status = xhr.status;
    err.method = option.method;
    err.url = option.action;
    return err;
}

function getBody(xhr) {
    const text = xhr.responseText || xhr.response;
    if (!text) {
        return text;
    }

    try {
        return JSON.parse(text);
    } catch (e) {
        return text;
    }
}

// option {
//  onProgress: (event: { percent: number }): void,
//  onError: (event: Error, body?: Object): void,
//  onSuccess: (body: Object): void,
//  data: Object,
//  filename: String,
//  file: File,
//  withCredentials: Boolean,
//  action: String,
//  headers: Object,
//  method: String
//  timeout: Number
// }
export default function upload(option) {
    const xhr = new XMLHttpRequest();
    // 进度条
    if (option.onProgress && xhr.upload) {
        xhr.upload.onprogress = function progress(e) {
            if (e.total > 0) {
                e.percent = (e.loaded / e.total) * 100;
            }
            option.onProgress(e);
        };
    }

    // 添加数据
    const formData = new FormData();

    if (option.data) {
        Object.keys(option.data).forEach(key => {
            formData.append(key, option.data[key]);
        });
    }
    if (option.file instanceof Blob) {
        formData.append(option.filename, option.file, option.file.name);
    } else {
        formData.append(option.filename, option.file);
    }

    xhr.onerror = function error(e) {
        option.onError(e);
    };

    xhr.onload = function onload() {
        // allow success when 2xx status
        // see https://github.com/react-component/upload/issues/34
        if (xhr.status < 200 || xhr.status >= 300) {
            return option.onError(getError(option, xhr), getBody(xhr));
        }

        option.onSuccess(getBody(xhr), xhr);
    };

    option.method = option.method || 'POST';
    xhr.open(option.method, option.action, true);

    // In Internet Explorer, the timeout property may be set only after calling the open() method and before calling the send() method.
    // see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout
    // 超时处理
    const { timeout } = option;

    if (typeof timeout === 'number' && timeout > 0) {
        xhr.timeout = timeout;
        xhr.ontimeout = () => {
            const msg = `Upload abort for exceeding time (timeout: ${timeout}ms)`;
            option.onError(getError(option, xhr, msg), getBody(xhr));
        };
    }

    // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
    // 信息凭证
    if (option.withCredentials && 'withCredentials' in xhr) {
        xhr.withCredentials = true;
    }

    // 在请求头中添加数据
    const headers = option.headers || {};

    // when set headers['X-Requested-With'] = null , can close default XHR header
    // see https://github.com/react-component/upload/issues/33
    if (headers['X-Requested-With'] !== null) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    }

    for (const h in headers) {
        if (headers.hasOwnProperty(h) && headers[h] !== null) {
            xhr.setRequestHeader(h, headers[h]);
        }
    }
    xhr.send(formData);

    return {
        abort() {
            xhr.abort();
        },
    };
}

1.3 总结

我们可以发现，ajax只是一种异步请求的方式，并不特指某一种具体的实现方式，但随着使用这种方式实现网络请求时内部又包含请求的情况，就会出现回调地狱，这也是XHR的诟病之一，因此，后来才催生了更加优雅的请求方式。

2.fetch

fetch 是在 ES6 出现的，它使用了 ES6 提出的 Promise 对象。它是 XMLHttpRequest 的替代品。

有人把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax ，所以真正应该和 XMLHttpRequest 作比较。

Fetch 是一个 API，它是真实存在的，它是基于 Promise 的。

建议阅读：MDN

以下内容摘选自：fetch教学

fetch()的功能与 XMLHttpRequest 基本相同，但有三个差异：

  1. fetch 使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁；
  2. fetch 采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码；
  3. fetch通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来；

在用法上，fetch() 接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。它的基本用法如下：

scss 复制代码 
fetch(url).then(...).catch(...)

下面是一个demo，从服务器获取 JSON 数据。

ini 复制代码 
fetch('https://api.github.com/users/ruanyf')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err));

fetch()接收到的response是一个 Stream 对象。response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象，

Promise 可以使用 await 语法改写，使得语义更清晰。

javascript 复制代码 
async function getJSON() {
  let url = 'https://api.github.com/users/ruanyf';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}

上面示例中，await 语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误。

2.1 Response

2.1.1 Response 对象的同步属性

fetch()请求成功以后，得到的是一个 Response 对象，它对应服务器的 HTTP 回应。

ini 复制代码 
const response = await fetch(url);

Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。

javascript 复制代码 
async function fetchText() {
  let response = await fetch('/readme.txt');
  console.log(response.status); 
  console.log(response.statusText);
}

response.status和response.statusText就是 Response 的同步属性，可以立即读取。

2.1.2 标头信息
  1. Response.ok

Response.ok属性返回一个布尔值，表示请求是否成功，true 对应 HTTP 请求的状态码 200 到 299，false 对应其他的状态码；

  1. Response.status

Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如 200，表示成功请求）；

  1. Response.statusText`

Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如：请求成功以后，服务器返回"OK"）；

  1. Response.url

Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL;

  1. Response.type

Response.type属性返回请求的类型。可能的值如下：

  • basic：普通请求，即同源请求；
  • cors：跨域请求；
  • error：网络错误，主要用于 Service Worker；
  • opaque：如果 fetch() 请求的 type 属性设为no-cors，就会返回这个值。表示发出的是简单的跨域请求，类似 form 表单的那种跨域请求；
  • opaqueredirect：如果 fetch() 请求的 redirect 属性设为 manual ，就会返回这个值；
  1. Response.redirected

Response.redirected属性返回一个布尔值，表示请求是否发生过跳转。

2.1.3 判断请求是否成功

fetch() 发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，fetch() 才会报错，其他情况都不会报错，而是认为请求成功。

这就是说，即使服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为 rejected状态）。

  1. Response.status

Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功。

javascript 复制代码 
async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

response.status属性只有等于 2xx （200~299），才能认定请求成功。这里不用考虑网址跳转（状态码为 3xx），因为 fetch() 会将跳转的状态码自动转为 200。

  1. response.ok 是否为true
arduino 复制代码 
if (response.ok) {
  // 请求成功
} else {
  // 请求失败
}
2.1.4 Response.headers

Response 对象还有一个Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。

Headers 对象可以使用for...of循环进行遍历。

javascript 复制代码 
const response = await fetch(url);

for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
}

// 或者
for (let [key, value] of response.headers.entries()) { 
  console.log(`${key} : ${value}`);  
}

Headers 对象提供了以下方法，用来操作标头：

scss 复制代码 
Headers.get()：根据指定的键名，返回键值。
Headers.has()： 返回一个布尔值，表示是否包含某个标头。
Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
Headers.append()：添加标头。
Headers.delete()：删除标头。
Headers.keys()：返回一个遍历器，可以依次遍历所有键名。
Headers.values()：返回一个遍历器，可以依次遍历所有键值。
Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。
Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

这些方法中，最常用的是response.headers.get()，用于读取某个标头的值。

csharp 复制代码 
let response = await fetch(url);  
response.headers.get('Content-Type')
// application/json; charset=utf-8

Headers.keys()和Headers.values()方法用来分别遍历标头的键名和键值。

scss 复制代码 
// 键名 keyList
for(let key of myHeaders.keys()) {
  console.log(key);
}

// 键值 valueList
for(let value of myHeaders.values()) {
  console.log(value);
}

Headers.forEach()方法也可以遍历所有的键值和键名。

javascript 复制代码 
let response = await fetch(url);
response.headers.forEach(
  (value, key) => console.log(key, ':', value)
);
2.1.5 读取内容的方法

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

  • response.text()：得到文本字符串；
  • response.json()：得到 JSON 对象；
  • response.blob()：得到二进制 Blob 对象；
  • response.formData()：得到 FormData 表单对象；
  • response.arrayBuffer()：得到二进制 ArrayBuffer 对象；

这5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

  1. response.text()

response.text()可以用于获取文本数据，比如 HTML 文件。

ini 复制代码 
const response = await fetch('/users.html');
const text = await response.text();
document.body.innerHTML = text;
  1. response.json()

response.json()主要用于获取服务器返回的 JSON 数据。

  1. response.formData()

response.formData()主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。

  1. response.blob()

response.blob()用于获取二进制文件。 示例：读取图片文件flower.jpg，显示在网页上。

ini 复制代码 
const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = URL.createObjectURL(myBlob);

const myImage = document.querySelector('img');
myImage.src = objectURL;
  1. response.arrayBuffer()

response.arrayBuffer()主要用于获取流媒体文件。

示例：response.arrayBuffer()获取音频文件song.ogg，然后在线播放。

ini 复制代码 
const audioCtx = new window.AudioContext();
const source = audioCtx.createBufferSource();

const response = await fetch('song.ogg');
const buffer = await response.arrayBuffer();

const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;
2.1.6 Response.clone

Stream 对象只能读取一次，读取完就没了。这意味着，前一节的五个读取方法，只能使用一个，如果继续使用，则会报错。

ini 复制代码 
let text =  await response.text();
let json =  await response.json();  // 报错

上面示例先使用了response.text()，就把 Stream 读完了。后面再调用response.json()，就没有内容可读了，所以报错。

Response 对象提供Response.clone()方法，创建 Response 对象的副本，实现多次读取。

示例：response.clone()复制了一份 Response 对象，然后将同一张图片读取了两次。

ini 复制代码 
const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);
2.1.7 Response.body

Response.body属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作。

它可以用来分块读取内容，应用之一就是显示下载的进度。

示例：我们分块来读取一张图片。

javascript 复制代码 
const response = await fetch('flower.jpg');
const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}

response.body.getReader()方法返回一个遍历器，这个遍历器的 read() 方法每次返回一个对象，表示本次读取的内容块。

这个对象的 done 属性是一个布尔值，用来判断有没有读完；value属性是一个 arrayBuffer 数组，表示内容块的内容，而 value.length 属性是当前块的大小。

2.2 定制 HTTP 请求

fetch() 的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。

scss 复制代码 
fetch(url, optionObj)

HTTP 请求的方法、标头、数据体都在这个对象里面设置。

2.2.1 POST请求

配置对象用到了三个属性：

  • method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置；
  • headers：一个对象，用来定制 HTTP 请求的标头；
  • body：POST 请求的数据体；

示例：用 fetch 发送一个 POST 请求。

php 复制代码 
const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
});

const json = await response.json();

注意：有些标头不能通过 headers 属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改。

2.2.2 提交 JSON 数据
  • 默认发送 纯文本 时，标头Content-Type的默认值是'text/plain;charset=UTF-8';
  • 提交 Json 数据时，标头Content-Type要设置成'application/json;charset=utf-8';

示例：用 fetch 发送一个 POST 请求，并提交 JSON 数据。

css 复制代码 
const user =  { name: 'John', surname: 'Smith'};
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json;charset=utf-8'
  }, 
  body: JSON.stringify(user) 
});
2.2.3 提交表单

示例：用 fetch 发送一个 POST 请求，并提交表单数据。

dart 复制代码 
const form = document.querySelector('form');

const response = await fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})
2.2.4 文件上传

如果表单里面有文件选择器，可以用前一个例子的写法，上传的文件包含在整个表单里面，一起提交。

另一种方法是用脚本添加文件，构造出一个表单，进行上传，请看下面的示例。

kotlin 复制代码 
const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});
2.2.5 直接上传二进制数据

fetch() 也可以直接上传二进制数据，将 Blob 或 arrayBuffer 数据放在 body 属性里面。

javascript 复制代码 
let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

2.3 option API

fetch() 第二个参数的完整 API 如下：

php 复制代码 
const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});

fetch() 请求的底层用的是 Request() 对象的接口，参数完全一样，因此上面的 API 也是 Request()的 API。

2.3.1 cache

cache 属性指定如何处理缓存，可能的取值如下：

  • default：默认值，先在缓存里面寻找匹配的请求；
  • no-store：直接请求远程服务器，并且不更新缓存；
  • reload：直接请求远程服务器，并且更新缓存；
  • no-cache：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存；
  • force-cache：缓存优先，只有不存在缓存的情况下，才请求远程服务器；
  • only-if-cached：只检查缓存，如果缓存里面不存在，将返回504错误；
2.3.2 mode

mode 属性指定请求的模式，可能的取值如下：

  • cors：默认值，允许跨域请求；
  • same-origin：只允许同源请求；
  • no-cors：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求；
2.3.3 credentials

credentials属性指定是否发送 Cookie，可能的取值如下：

  • same-origin：默认值，同源请求时发送 Cookie，跨域请求时不发送；
  • include：不管同源请求，还是跨域请求，一律发送 Cookie；
  • omit：一律不发送；
2.3.4 signal

signal属性指定一个 AbortSignal 实例，用于取消 fetch() 请求。

在下一小节 fetch cancel 中，会详细讲解它的使用场景和方法。

2.3.5 keepalive

keepalive属性用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。

一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。这时，如果不用keepalive属性，数据可能无法发送，因为浏览器已经把页面卸载了。

php 复制代码 
window.onunload = function() {
  fetch('/analytics', {
    method: 'POST',
    body: "statistics",
    keepalive: true
  });
};
2.3.6 redirect

redirect属性指定 HTTP 跳转的处理方法，可能的取值如下：

  • follow：默认值，fetch() 跟随 HTTP 跳转；
  • error：如果发生跳转，fetch()就报错；
  • manual：fetch() 不跟随 HTTP 跳转，但是 response.url 属性会指向新的 URL，response.redirected 属性会变为true，由开发者自己决定后续如何处理跳转；
2.3.7 integrity

integrity属性指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。

比如，下载文件时，检查文件的 SHA-256 哈希值是否相符，确保没有被篡改。

php 复制代码 
fetch('http://site.com/file', {
  integrity: 'sha256-abcdef'
});
2.3.8 referrer

referrer属性用于设定 fetch() 请求的 referer标头。

这个属性可以为任意字符串，也可以设为空字符串（即不发送referer标头）。

php 复制代码 
fetch('/page', {
  referrer: ''
});
2.3.9 referrer

referrerPolicy属性用于设定 Referer 标头的规则，可能的取值如下：

  • no-referrer-when-downgrade：默认值，总是发送Referer标头，除非从 HTTPS 页面请求 HTTP 资源时不发送；
  • no-referrer：不发送Referer标头；
  • origin：Referer标头只包含域名，不包含完整的路径；
  • origin-when-cross-origin：同源请求Referer标头包含完整的路径，跨域请求只包含域名；
  • same-origin：跨域请求不发送Referer，同源请求则发送；
  • strict-origin：Referer标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送Referer标头；
  • strict-origin-when-cross-origin：同源请求时Referer标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头；
  • unsafe-url：不管什么情况，总是发送Referer标头；

2.4 fetch cancel

fetch() 请求发送以后，如果中途想要取消，需要使用AbortController对象。

ini 复制代码 
let controller = new AbortController();
let signal = controller.signal;

fetch(url, {
  signal: controller.signal
});

signal.addEventListener('abort',
  () => console.log('abort!')
);

controller.abort(); // 取消

console.log(signal.aborted); // true

上面示例中，首先新建AbortController实例，然后发送 fetch() 请求，配置对象的signal属性必须指定接收 AbortController 实例发送的信号controller.signal。

controller.abort()方法用于发出取消信号，这时会触发abort事件，这个事件可以监听，也可以通过controller.signal.aborted属性判断取消信号是否已经发出。

下面是一个1秒后自动取消请求的示例。

javascript 复制代码 
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('/long-operation', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

2.5 测试

针对json-server服务，只需要执行：

ini 复制代码 
fetch('http://localhost:3000/posts')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });

有兴趣的同学可以参考：fetch polyfill

3.axios

github地址

官网地址

axios 是一个用于网络请求的第三方库，是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

  • 从浏览器中创建 XMLHttpRequest；
  • 从 node.js 发出 http 请求；
  • 支持 Promise API；
  • 拦截请求和响应；
  • 转换请求和响应数据；
  • 取消请求；
  • 自动转换JSON数据；
  • 客户端支持防止CSRF/XSRF；

3.1 基础使用

Axios 提供了两种不同的形式来发送 HTTP 请求：

  • axios(config)
  • axios.get/post(url, config)
3.1.1 方法

axios(config) 方法接收一个对象，这个对象包含了一些对请求的配置， axios 会根据这些配置来发送对应的 HTTP 请求。

最基本的配置项应该包括：

  • method：请求的方法（可填可不填，可选值：get, post 等）；
  • url：请求的地址 （必填项）；
  • data：请求发送的数据（可填可不填，post 等请求才需要填写）；

默认的请求方法是get，所以如果是get请求可以不设置method，只传入 url 即可。

示例1：发送 GET 请求（默认的方法）。

scss 复制代码 
axios('/user/12345');

示例2：发送 POST 请求。

php 复制代码 
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    consloe.log(res)
}).catch(err => {
    console.log(err)
})
3.1.2 请求别名

除了使用axios(config) 之外，还可以使用请求别名axios.get(url, config)或者axios.post(url, config) 发送对应的 HTTP 请求。

示例1：发送 GET 请求。

lua 复制代码 
axios.get('/user?ID=12345').then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

示例2：发送 POST 请求。

lua 复制代码 
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

3.2 响应数据

其中的 data 是后端返回的数据，一般只需要关注 response 中的 data 字段就行。

perl 复制代码 
{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}
3.3 创建实例

可以使用自定义配置新建一个 axios 实例 。

语法：axios.create([config])

php 复制代码 
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

创建的实例中的 axios() api 改为了 request() api，使用方式是一样的，其他如：请求别名等函数，都没有改变。

以下是实例所拥有的方法：

scss 复制代码 
request(config)；
get(url[, config])；
delete(url[, config])；
head(url[, config])；
options(url[, config])；
post(url[, data[, config]])；
put(url[, data[, config]])；
patch(url[, data[, config]])；

axios 会把这些方法中的 config 和 创建实例时指定的 config 合并到一起使用。

3.4 拦截器
  • axios.interceptors.request：请求拦截器
  • axios.interceptors.response：响应拦截器
javascript 复制代码 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.header["Token"] = "xxxx"
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.status === 200){
    return response.data
  } else {
    return Promise.reject(new Error('error'))
  }
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

如果想要取消拦截器，可以通过使用一个变量来接收设置拦截器时返回的实例，然后使用 eject 来取消拦截器。

php 复制代码 
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
3.5 完整的请求配置
perl 复制代码 
{
   // `url` 是用于请求的服务器 URL
  url: '/user',
  // `method` 是创建请求时使用的方法
  method: 'get', // default
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default
  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default
   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default
  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default
  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}
3.6 测试

针对json-server服务，只需要执行：

javascript 复制代码 
const axios = require('axios');

axios
  .get('http://localhost:3000/posts')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

4.总结

  1. Ajax 是Async Javascript And Xml的简称，它是原生 JavaScript 的一种请求方案，利用 XMLHttpRequest 进行异步请求数据，实现无感刷新数据；
  2. Fetch 是 ES6 新推出的一套异步请求方案，它天生自带 Promise，同时也是原生的，如果在较小项目中为了项目大小着想和兼容性不是那么高的前提下不妨可以用它来进行异步请求也是不错的；
  3. Axios 是基于 Ajax 和 Promise 封装的一个库，可以利用 Promise 来更好的管控请求回调嵌套造成的回调地狱。
相关推荐
恋猫de小郭9 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅15 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606116 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了16 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅16 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅16 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅17 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment17 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅17 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊17 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10在Trae中使用Pencil MCP