Fetch

fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。fetch 不是 ajax 的进一步封装，而是原生 js。Fetch 函数就是原生 js，没有使用 XMLHttpRequest 对象

Fetch 的参数#

url ,该参数定义要获取的资源,可以是一个 url 字符串,也可以是一个 Request 对象
options ,该参数可选,为一个对象,内部含有一些对请求的设置属性
- method<请求使用的方法>。如、POST 等
- headers<请求头信息>。形式为 Headers 对象或 ByteString
- body<请求的> body 信息,可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息
- mode<请求的模式>。如 cors、no-cors 或者 same-origin
- credentiala<请求的> credentials。如 omit、same-origin 或者 include
- cache<请求的> cache 模式,no-store,reload,no-cache 或者 only-if-cached

response 对象#

response 为一个 Promise 对象成功时传回的对象,该属性含有对应返回数据的属性和方法

属性#

status (number),HTTP 请求结果参数,在 100-599 范围
statusText (string),服务器返回的状态报告
ok (boolean),如果返回 200 表示请求成功则为 true
headers (Headers),返回头部信息,该属性后面也有对应的方法
has(name) (boolean),判断是否存在该信息头
get(name) (string),获取信息头的数据
getAll(name) (Array),获取所有头部数据
set(name,value),设置请求头信息
append(name,value),添加 header 的内容
delete(name),删除 header 的信息
forEach(function(value,name){...},[thisContext]),循环读取 header 的信息
url (string),详细的地址

方法#

text(),以 string 的形式生成请求 text
json(),生成 JSON.parse(responseText)的结果
blob(),生成一个 Blob
arrayBuffer(),生成一个 ArrayBuffer
formData(),生成格式化数据,可用于其它的请求

其他方法#

clone(),创建一个 Response 对象的克隆
Response.error(),返回一个绑定了网络错误的新的 Response 对象
Response.redirect(),用另一个 URL 创建一个新的 Resonse 对象

用法#

get#

1
  fetch("a.html")
2
      .then(function (response) {
3
          return response.text()
4
      })
5
      .then(function (response) {
6
          document.body.innerHTML = response
7
      })

post#

1
  fetch("a.html", {
2
      method: "POST",
3
      headers: {
4
          "Accept": "application/json",
5
          "Content-Type": "application/json";
6
      },
7
      body: JSON.stringify({
8
          user: "zhangsan",
9
          pwd: 123456;
10
      })
11
  })

与原生 Ajax 的比较#

原生 Ajax#

1
  var Ajax = new XMLHttpRequest()
2
  Ajax.open("GET", url)
3
  Ajax.responseType = "json"
4
  Ajax.send()
5
  Ajax.onreadystatechange = function () {
6
      console.log(Ajax.response)
7
  }
8
  Ajax.onerror = function () {
9
      console.log("error")
10
  }

fetch#

1
  fetch(url).then(function (response) {
2
      return response.json() //相当于JSON.parse(response);
3
  }).then(function (data) {
4
      console.log(data)
5
  }).catch(function (err) {
6
      console.log("error", err)
7
  });
8

9
  //使用箭头函数
10
  fetch(url).then(
11
      response => response.json()
12
  ).then(
13
      data => console.log(data)
14
  ).catch(
15
      err => console.log("error", err)
16
  );
17

18
  //使用async函数
19
  let Fetch = async function () {
20
      try {
21
          let response = await fetch(url)
22
          let data = await response.json()
23
          console.log(data)
24
      } catch (err) {
25
          console.log("error", err)
26
      }
27
  }

Fetch 的参数#

response 对象#

属性#

方法#

其他方法#

用法#

get#

post#

与原生 Ajax 的比较#

原生 Ajax#

fetch#

文章分享