AJAX发送网络请求-封装AJAX-Fetch发送网络请求

1.AJAX网络请求

1.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)

1.2 XHR的状态

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

状态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获取；

1.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)
})

1.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即可；

1.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()

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

1.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()
  

  请求结果

• 方式二：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=成都市")
  

  请求结果

• 方式三：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 }))
  

  请求结果

2.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>

3.Fetch发生网络请求

3.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)
})

3.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)
})

3.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()

3.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()