网络编程-JavaScript中发送网络请求汇总

淩亂°似流年 2023-09-28 13:49 152阅读 0赞

#### 文章目录 ####

*   *  1.前后端分离优势
     *  2.HTTP协议的解析
     *   *  2.1 HTTP的介绍
         *  2.2 HTTP的组成
         *  2.3 HTTP的版本
         *  2.4 HTTP请求方式
         *  2.5 HTTP请求头字段
         *  2.6 HTTP响应状态码
         *  2.7 HTTP响应头
     *  3.AJAX网络请求
     *   *  3.1 AJAX发送请求
         *  3.2 XHR的状态
         *  3.3 XHR其他事件监听
         *  3.4 响应数据和响应类型
         *  3.5 HTTP的响应状态
         *  3.7 GET/POST传递参数
     *  4.AJAX网络请求封装
     *   *  补充: 过期时间和取消请求
         *   *  过期时间
             *  取消请求
     *  5.Fetch使用和上传文件
     *   *  5.1 Fetch基本使用
         *  5.2 Fetch数据的响应
         *  5.3 Fetch网络请求的演练
         *  5.4 Fetch POST请求
         *  5.4 Fetch POST请求

### 1.前后端分离优势 ###

**早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）**：

*  客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

**服务器端渲染的缺点：**

*  当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
 *  而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

**有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？**

*  答案正是“AJAX”。

**AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。**

*  AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

**你可以使用AJAX最主要的两个特性做下列事** :

*  在不重新加载页面的情况下发送请求给服务器；
 *  接受并使用从服务器发来的数据。

**这里有两幅图给大家理解一下**:

1.  **服务器端渲染**

![在这里插入图片描述][7df5b1577d6c4445af77d7efe61a122e.png_pic_center]

1.  **前后端分离**

![在这里插入图片描述][81754a9a931546d9ae008624acfbc193.png_pic_center]

### 2.HTTP协议的解析 ###

#### 2.1 HTTP的介绍 ####

**什么是HTTP呢？我们来看一下维基百科的解释**：

*  超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；
 *  HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
 *  通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

**HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准**。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

*  我们称这个客户端为用户代理程序（user agent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

*  我们也称这个响应服务器为源服务器（origin server）；

**我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。**

**目前我们页面中很多数据是动态展示的**：

*  比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

#### 2.2 HTTP的组成 ####

**一次HTTP请求主要包括：请求（Request）和响应（Response）**(如下图所示)

![在这里插入图片描述][a4e804c5a442427197f6bbc5e1e3f136.png_pic_center]

**请求又包含请求行、请求头、请求体** (如下图所示)

![在这里插入图片描述][965b5b5348f24e11af121497ab16ce33.png_pic_center]

**响应也包含响应行、响应头、响应体** (如下图所示)

![在这里插入图片描述][f93bb5e49b2a41fcb3a28df68bc6b039.png_pic_center]

#### 2.3 HTTP的版本 ####

**HTTP/0.9**

*  发布于1991年；
 *  只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

**HTTP/1.0**

*  发布于1996年；
 *  支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型(不再局限于文本数据) ；
 *  但是浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗；

**HTTP/1.1(目前使用最广泛的版本)**

*  发布于1997年；
 *  增加了PUT、DELETE等请求方法；
 *  采用持久连接(Connection: keep-alive)，多个请求可以共用同一个TCP连接；

**HTTP/2.0, 2015年**

**HTTP/3.0, 2018年**

#### 2.4 HTTP请求方式 ####

**在RFC中定义了一组请求方式，来表示要对给定资源执行的操作**：

*  GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。
 *  HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。
    
    比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；
 *  POST：POST 方法用于将实体提交到指定的资源。
 *  PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；
 *  DELETE：DELETE 方法删除指定的资源；
 *  PATCH：PATCH 方法用于对资源应部分修改；
 *  CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
 *  TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

**在开发中使用最多的是GET、POST请求**；

*  **在后续的后台管理项目中，我们也会使用PATCH、DELETE请求**；

#### 2.5 HTTP请求头字段 ####

**在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息(如下)** :

![在这里插入图片描述][525d8fd2b9604503914aca3c4580a03b.png_pic_center]

**content-type: 这次请求携带的数据的类型**

*  application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值
 *  application/json：表示是一个json类型；
 *  text/plain：表示是文本类型；
 *  application/xml：表示是xml类型；
 *  multipart/form-data：表示是上传文件；

**content-length：文件的大小长度**

**keep-alive** :

*  http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
 *  在http1.0中，如果想要继续保持连接：
    
     *  浏览器需要在请求头中添加 connection: keep-alive；
     *  服务器需要在响应头中添加 connection:keey-alive；
     *  当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
 *  在http1.1中，所有连接默认是 connection: keep-alive的；
    
     *  不同的Web服务器会有不同的保持 keep-alive的时间；
     *  Node中默认是5s中；

**accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；**

**accept：告知服务器，客户端可接受文件的格式类型；**

**user-agent：客户端相关的信息；**

#### 2.6 HTTP响应状态码 ####

**Http状态码（Http Status Code）是用来表示Http响应状态的数字代码**：

*  Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；

<table> 
 <thead> 
  <tr> 
   <th>常见HTTP状态码</th> 
   <th>状态描述</th> 
   <th>信息说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>200</td> 
   <td>OK</td> 
   <td>客户端请求成功</td> 
  </tr> 
  <tr> 
   <td>201</td> 
   <td>Created</td> 
   <td>POST请求，创建新的资源</td> 
  </tr> 
  <tr> 
   <td>301</td> 
   <td>Moved Permanently</td> 
   <td>请求资源的URL已经修改，响应中会给出新的URL</td> 
  </tr> 
  <tr> 
   <td>400</td> 
   <td>Bad Request</td> 
   <td>客户端的错误，服务器无法或者不进行处理</td> 
  </tr> 
  <tr> 
   <td>401</td> 
   <td>Unauthorized</td> 
   <td>未授权的错误，必须携带请求的身份信息</td> 
  </tr> 
  <tr> 
   <td>403</td> 
   <td>Forbidden</td> 
   <td>客户端没有权限访问，被拒接</td> 
  </tr> 
  <tr> 
   <td>404</td> 
   <td>Not Found</td> 
   <td>服务器找不到请求的资源。</td> 
  </tr> 
  <tr> 
   <td>500</td> 
   <td>Internal Server Error</td> 
   <td>服务器遇到了不知道如何处理的情况。</td> 
  </tr> 
  <tr> 
   <td>503</td> 
   <td>Service Unavailable</td> 
   <td>服务器不可用，可能处理维护或者重载状态，暂时无法访问</td> 
  </tr> 
 </tbody> 
</table>

更多响应码介绍在MDN文档上, 链接给到大家: [MDN上响应码文档][MDN]: https://developer.mozilla.org/zh-CN/docs/web/http/status

#### 2.7 HTTP响应头 ####

**响应的header中包括一些服务器给客户端的信息**：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3n6aQgp-1657070357626)(img/Snipaste\_2022-07-05\_11-06-57.png)\]

### 3.AJAX网络请求 ###

#### 3.1 AJAX发送请求 ####

**AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）**

*  它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据；

如何来完成AJAX请求呢？

*  **第一步**：创建网络请求的AJAX对象（使用XMLHttpRequest）
 *  **第二步**：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；
 *  **第三步**：配置网络请求（通过open方法）, open方法可以传入两个参数；
    
    参数一: method(请求的方式: get, post …)
    
    参数二: url(请求的地址)
 *  **第四步**：发送send网络请求；

【演示代码】

// 1.创建网络请求对象
    const xhr = new XMLHttpRequest()
    
    // 2.监听对象状态的变化
    xhr.addEventListener("readystatechange", function() {
        
      // 拿到网络请求的结果
      console.log(xhr.response)
    })
    
    // 3.配置网络请求
    // 参数一: 请求的方式; 参数二: 要请求的url地址
    xhr.open("get", "http://192.168.0.110:1888")
    
    // 4.发生网络请求
    xhr.send()

**发送同步请求：**

*  我们发送网络请求, 默认是异步的, 但是我们也可以发送同步的网络请求
 *  我们是需要将open的第三个参数设置为false (默认时true), 就可以开启同步的请求
 *  当然我们实际开发还是用异步的请求

// 开启同步
    xhr.open("get", "http://192.168.0.110:1888", false)

#### 3.2 XHR的状态 ####

**事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态**:

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>状态</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>UNSENT</td> 
   <td>代理被创建，但尚未调用 open() 方法。</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>OPENED</td> 
   <td>open() 方法已经被调用。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>HEADERS_RECEIVED</td> 
   <td>send() 方法已经被调用，并且头部和状态已经可获得。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>LOADING</td> 
   <td>下载中；responseText 属性已经包含部分数据。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>DONE</td> 
   <td>下载操作已完成。</td> 
  </tr> 
 </tbody> 
</table>

**状态0我们是监听不到的**

--------------------

**例如: 我们想要获取结果, 应该在下载操作已完成后获取**

// 1.创建网络请求对象
    const xhr = new XMLHttpRequest()
    
    // 2.监听对象状态的变化
    xhr.addEventListener("readystatechange", function() {
        
      // 状态不为4的话直接return
      if (xhr.readyState !== XMLHttpRequest.DONE) return
      
      // 拿到的结果是一个字符串, 我们可以转成js对象
      const resJSON = JSON.parse(xhr.response)
      console.log(resJSON)
    })
    
    // 3.配置网络请求
    // 参数一: 请求的方式; 参数二: 要请求的url地址
    xhr.open("get", "http://192.168.0.110:1888")
    
    // 4.发生网络请求
    xhr.send()

**注意<：这个状态并非是HTTP的响应状态，而是记录的XMLHttpRequest对象的状态变化。**

*  http响应状态通过status获取；

#### 3.3 XHR其他事件监听 ####

**我们除了可以监听readystatechange之外, 还有其他的事件可以监听**

*  **loadstart**：请求开始。
 *  **progress**： 一个响应数据包到达，此时整个 response body 都在 response 中。
 *  **abort**：调用 xhr.abort() 取消了请求。
 *  **error**：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
 *  **load**：请求成功完成。
 *  **timeout**：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
 *  **loadend**：在 load，error，timeout 或 abort 之后触发。

**我们也可以在load中获取请求数据：**

// 在load中获取请求结果
    xhr.addEventListener("load", function() {
        
      console.log(xhr.response)
    })

#### 3.4 响应数据和响应类型 ####

**发送了请求后，我们需要获取对应的结果：response属性**

*  **XMLHttpRequest response 属性返回响应的正文内容**；
 *  **返回的类型取决于responseType的属性设置**

**通过responseType可以设置获取数据的类型**

*  如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
 *  设置数据类型, 一般在监听事件之后, 且在send方法之前

const xhr = new XMLHttpRequest()
    
    xhr.addEventListener("load", function() {
        
      console.log(xhr.response)
    })
    
    // 由于responseType默认值为test, 因此我们拿到的结果是一个字符串
    // 告知xhr获取的数据为json类型
    xhr.responseType = "json"
    
    // json类型接口
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")
    
    xhr.send()

**和responseText、responseXML的区别**：

*  早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、 responseXML来获取响应结果 , 之后将它们转化成JavaScript对象形式；
 *  **目前服务器基本返回的都是json数据，直接设置为json即可**；

#### 3.5 HTTP的响应状态 ####

**前面我们提到, XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态。**

**如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取**：

*  **status是获取状态码**
 *  **statusText是获取状态描述**

const xhr = new XMLHttpRequest()
    
    xhr.addEventListener("load", function() {
        
      console.log(xhr.response)
      // 1.获取状态码
      console.log(xhr.status) // 200
      // 2.获取状态描述
      console.log(xhr.statusText) // OK
    })
    
    xhr.responseType = "json"
    
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")
    
    xhr.send()

**我们写一个不存在的接口, 测试一下状态码和状态描述**

const xhr = new XMLHttpRequest()
    
    xhr.addEventListener("load", function() {
        
      console.log(xhr.response) // null
      // 1.获取状态码
      console.log(xhr.status) // 404
      // 2.获取状态描述
      console.log(xhr.statusText) // Not Found
    })
    
    xhr.responseType = "json"
    
    xhr.open("get", "http://123.207.32.32:8000/aaa/bbb/ccc")
    
    xhr.send()

**大家可以再看看刚刚的常用状态码表格**

#### 3.7 GET/POST传递参数 ####

**在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。**

**常见的传递给服务器数据的方式有如下几种** :

*  **方式一**：GET请求的query参数(常用)
    
        const xhr = new XMLHttpRequest()
        
        xhr.addEventListener("load", function() {
              
          // 传入的参数服务器会返回
          console.log(xhr.response)
        })
        
        xhr.responseType = "json"
        
        // 在传入的url输入查询字符串传递参数
        xhr.open(
          "get", 
        	"http://123.207.32.32:1888/02_param/get?name=kaisa&age=18&address=成都市"
        )
        
        xhr.send()
    
    **请求结果**

![在这里插入图片描述][5704630d1e1f4abaa8adc78ae8294c4a.png_pic_center]

*  **方式二**：POST请求 x-www-form-urlencoded 格式
    
        const xhr = new XMLHttpRequest()
        
        xhr.addEventListener("load", function() {
              
          console.log(xhr.response)
        })
        
        xhr.responseType = "json"
        
        // 1.发送post请求
        xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
        
        // 2.告知服务器要发送数据的格式
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        // 3.在请求体中传入参数
        xhr.send("name=kaisa&age=18&address=成都市")
    
    **请求结果**

![在这里插入图片描述][29663cb9d617440aa4d43c532f3d8af3.png_pic_center]

*  **方式三**：POST请求 FormData 格式
 *  **方式四**：POST请求 JSON 格式(常用)
    
        const xhr = new XMLHttpRequest()
        
        xhr.addEventListener("load", function() {
              
          console.log(xhr.response)
        })
        
        xhr.responseType = "json"
        
        // 1.发送post请求
        xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
        
        // 2.告知服务器要发送数据的格式
        xhr.setRequestHeader("Content-type", "application/json")
        
        // 3.发送JSON格式的字符串
        xhr.send(JSON.stringify({
               name: "kaisa", age: 18, height: 1.88 }))
    
    **请求结果**

![在这里插入图片描述][2879937c33614f5d9e2844dd7dbf8664.png_pic_center]

### 4.AJAX网络请求封装 ###

> **在实际开发中, 我们并不会自己封装AJAX, 而是直接使用axios库, 再对axios库进行二次封装**
> 
> **我们封装AJAX原因是借此练习一下前面所学的知识**

**由于我们每次使用网络请求, 都写写很多行同样的代码, 使用起来是非常不方便的, 我们封装的目的就是为了使用起来更方便**

**封装步骤的解释写在代码注释里面, 源代码和测试代码给大家**

// 定义一个函数封装ajax,
    // 由于使用参数可能会传很多个, 因此我们可以让使用者传入一个对象
    function myajax({
        
      url,
      method = "get",
      date = {
        },
      success,
      failure
    } = {
        }) {
        
      // 1.创建对象
      const xhr = new XMLHttpRequest()
    
      // 2.监听数据
      xhr.onload = function() {
        
        // 用响应码判断是否成功
        if (xhr.status >= 200 && xhr.status < 300) {
        
          success && success(xhr.response)
        } else {
        
          failure && failure({
         status: xhr.status, message: xhr.statusText })
        }
      }
    
      // 3.设置响应类型
      xhr.responseType = "json"
    
      // 考虑get请求放在date对象中的情况单独处理
      if (method.toUpperCase() === "GET") {
        
        const urlStrings = []
        for (key in date) {
        
          urlStrings.push(`${
          key}=${
          date[key]}`)
        }
        url = url + "?" + urlStrings.join("&")
    
        xhr.open(method, url)
        xhr.send()
      } else {
        
        // 4.open方法
        xhr.open(method, url)
    
        // 5.send方法
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify(date))
      }
    }
    
    // 测试get请求
    myajax({
        
      url: "http://123.207.32.32:1888/02_param/get",
      date: {
        
        name: "get",
        age: 18
      },
      // 传入一个请求成功的回调
      success: function(res) {
        
        console.log(res)
      },
      // 传入失败的回调
      failure: function(err) {
        
        console.log("err", err)
      }
    })
    
    // 测试post请求
    myajax({
        
      url: "http://123.207.32.32:1888/02_param/posturl",
      method: "post",
      // 传入一个请求成功的回调
      success: function(res) {
        
        console.log(res)
      },
      date: {
        
        name: "post",
        age: 18
      },
      // 传入失败的回调
      failure: function(err) {
        
        console.log("err", err)
      }
    })

**我们对上面的基本封装做一点优化, 为了防止回调地狱的情况出现, 我们可以返回一个promise, 并且不需要再传入成功的回调和失败的回调, 因为promise中有**

function myajax({
        
      url,
      method = "get",
      date = {
        }
    } = {
        }) {
        
      // 返回一个promise
      return new Promise((resolve, reject) => {
        
        const xhr = new XMLHttpRequest()    
    
        xhr.onload = function() {
        
          if (xhr.status >= 200 && xhr.status < 300) {
        
            // 使用resolve成功的回调
            resolve(xhr.response)
          } else {
        
            // 使用reject失败的回调
            reject({
         status: xhr.status, message: xhr.statusText })
          }
        }   
    
        xhr.responseType = "json"   
    
        if (method.toUpperCase() === "GET") {
        
          const urlStrings = []
          for (key in date) {
        
            urlStrings.push(`${
          key}=${
          date[key]}`)
          }
          url = url + "?" + urlStrings.join("&")    
    
          xhr.open(method, url)
          xhr.send()
        } else {
        
          xhr.open(method, url)   
    
          xhr.setRequestHeader("Content-type", "application/json")
          xhr.send(JSON.stringify(date))
        }
      })
    }
    
    // 测试get请求
    myajax({
        
      url: "http://123.207.32.32:1888/02_param/get",
      date: {
        
        name: "get",
        age: 18
      }
    // then中成功的结果
    }).then(res => {
        
      console.log(res)
    // catch中失败的结果
    }).catch(err => {
        
      console.log(err)
    })
    
    // 测试post请求
    myajax({
        
      url: "http://123.207.32.32:1888/02_param/posturl",
      method: "post",
      date: {
        
        name: "post",
        age: 18
      }
    // then中成功的结果
    }).then(res => {
        
      console.log(res)
    // catch中失败的结果
    }).catch(err => {
        
      console.log(err)
    })

#### 补充: 过期时间和取消请求 ####

> 下面我用的是一个延时的接口

##### 过期时间 #####

**在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。**

*  当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
 *  默认值为0，表示没有设置超时时间；

**下面写个案例, 如果超过3000毫秒没有请求到数据就取消本次网络请求**

*  请求超时可以在timeout中监听

const xhr = new XMLHttpRequest()
    
    xhr.addEventListener("load", function() {
        
      console.log(xhr.response)
    })
    
    // 请求超时可以在timeout中监听
    xhr.addEventListener("timeout", function() {
        
      console.log("请求超时")
    })
    
    xhr.responseType = "json"
    
    xhr.timeout = 3000
    
    xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")
    
    xhr.send()

##### 取消请求 #####

**取消网络请求, 我们也可以通过abort方法强制 (手动) 取消请求**；

*  请求取消可以在abort中监听

<button>取消请求</button>
    
    <script>
      const xhr = new XMLHttpRequest()  
    
      xhr.addEventListener("load", function() {
        
        console.log(xhr.response)
      })  
    
      // 请求取消可以在abort中监听
      xhr.addEventListener("abort", function() {
        
        console.log("请求已取消")
      })  
    
      xhr.responseType = "json" 
    
      xhr.timeout = 3000  
    
      xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout") 
    
      xhr.send()  
    
    	// 监听按钮点击取消请求
      const btnEl = document.querySelector("button")
      btnEl.onclick = function() {
        
        xhr.abort()
      }
    </script>

### 5.Fetch使用和上传文件 ###

#### 5.1 Fetch基本使用 ####

**Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：**

**比如返回值是一个Promise，提供了一种更加优雅的处理结果方式**

*  在请求发送成功时，调用resolve回调then；
 *  在请求发送失败时，调用reject回调catch；

**比如不像XMLHttpRequest一样，所有的操作都在一个对象上**

**fetch函数的使用**：

`fetch(input[, init])`

**input**：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；

**init**：其他初始化参数, 是一个对象

*  **method**: 请求使用的方法，如 GET、POST；
 *  **headers**: 请求的头信息；
 *  **body**: 请求的 body 信息；

**【演示代码】**

发送一个get请求(先了解一下 马上会详细分析)

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
        
      // 获取具体的结果还需调用一次
      // 如果是文本就res.text, 其他的同样的道理
      res.json().then(res => {
        
        console.log(res)
      })
    }).catch(err => {
        
      console.log(err)
    })

#### 5.2 Fetch数据的响应 ####

**Fetch的数据响应主要分为两个阶段** :

**阶段一：当服务器返回了响应（response）**

*  fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析；
 *  在这个阶段，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功；
 *  如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject；
 *  异常的 HTTP 状态，例如 404 或 500，不会导致出现 error；

**我们可以在 response 的属性中看到 HTTP 状态**：

*  status：HTTP 状态码，例如 200；
 *  ok：布尔值，如果 HTTP 状态码为 200-299，则为 true；

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
        
      
      // response中查看状态码, 状态描述
      console.log(res.status) // 200
      console.log(res.statusText) // OK
      console.log(res.ok) // true
    
    }).catch(err => {
        
      console.log(err)
    })

**第二阶段，为了获取 response body，我们需要使用一个其他的方法调用, 这个方法同样返回Promise。**

*  **response.text()** —— 读取 response，并以文本形式返回 response；
 *  **response.json()**—— 将 response 解析为 JSON；

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
        
      
      // 第二阶段, 同样返回Promise
      res.json().then(res => {
        
        // 拿到最终结果
        console.log(res)
      })
    
    }).catch(err => {
        
      console.log(err)
    })

#### 5.3 Fetch网络请求的演练 ####

**基于Promise的使用方案**：

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
        
      // 获取具体的结果还需调用一次
      // 如果是文本就res.text, 其他的同样的道理
      return res.json()
    }).then(res => {
        
      console.log(res)
    }).catch(err => {
        
      console.log(err)
    })

**基于async、await的使用方案**：

async function getDate() {
        
      const response1 = await fetch("http://123.207.32.32:8000/home/multidata")
      const response2 = await response1.json()
      // 打印结果
      console.log(response2)
    }
    
    getDate()

#### 5.4 Fetch POST请求 ####

**创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项**：

**method**：HTTP 方法，例如 POST，

**body**：request body，其中之一：

*  字符串（例如 JSON 编码的），
 *  FormData 对象，以 multipart/form-data 形式发送数据，

async function getDate() {
        
      // post请求需要在fetch方法中传入第二个参数
      const response1 = await fetch("http://123.207.32.32:1888/02_param/postjson",{
        
        method: "post",
        headers: {
        
          "Content-type": "application/json"
        },
        // 参数防砸body中
        body: JSON.stringify({
        
          username: "aaa",
          postname: "123456"
        })
      })
      const response2 = await response1.json()
      // 打印结果
      console.log(response2)
    }
    
    getDate()
    fetch("http://123.207.32.32:8000/home/multidata")
      const response2 = await response1.json()
      // 打印结果
      console.log(response2)
    }
    
    getDate()

#### 5.4 Fetch POST请求 ####

**创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项**：

**method**：HTTP 方法，例如 POST，

**body**：request body，其中之一：

*  字符串（例如 JSON 编码的），
 *  FormData 对象，以 multipart/form-data 形式发送数据，

[7df5b1577d6c4445af77d7efe61a122e.png_pic_center]: https://img-blog.csdnimg.cn/7df5b1577d6c4445af77d7efe61a122e.png#pic_center
[81754a9a931546d9ae008624acfbc193.png_pic_center]: https://img-blog.csdnimg.cn/81754a9a931546d9ae008624acfbc193.png#pic_center
[a4e804c5a442427197f6bbc5e1e3f136.png_pic_center]: https://img-blog.csdnimg.cn/a4e804c5a442427197f6bbc5e1e3f136.png#pic_center
[965b5b5348f24e11af121497ab16ce33.png_pic_center]: https://img-blog.csdnimg.cn/965b5b5348f24e11af121497ab16ce33.png#pic_center
[f93bb5e49b2a41fcb3a28df68bc6b039.png_pic_center]: https://img-blog.csdnimg.cn/f93bb5e49b2a41fcb3a28df68bc6b039.png#pic_center
[525d8fd2b9604503914aca3c4580a03b.png_pic_center]: https://img-blog.csdnimg.cn/525d8fd2b9604503914aca3c4580a03b.png#pic_center
[MDN]: https://developer.mozilla.org/zh-CN/docs/web/http/status
[5704630d1e1f4abaa8adc78ae8294c4a.png_pic_center]: https://img-blog.csdnimg.cn/5704630d1e1f4abaa8adc78ae8294c4a.png#pic_center
[29663cb9d617440aa4d43c532f3d8af3.png_pic_center]: https://img-blog.csdnimg.cn/29663cb9d617440aa4d43c532f3d8af3.png#pic_center
[2879937c33614f5d9e2844dd7dbf8664.png_pic_center]: https://img-blog.csdnimg.cn/2879937c33614f5d9e2844dd7dbf8664.png#pic_center