fetch的简单入门

[gdutwyg]

初识fetch

现在获取后台数据的时候，既有jq封装的ajax，也有axios等等，也有原生的XMLHttpRequest，但是今天没有介绍这些，而是介绍另外一个api，fetch

fetch，说白了，就是XMLHttpRequest的一种替代方案。如果有人问你，除了XMLHttpRequest获取后台数据之外，还有没有其他的替代原生api？

这是你就可以回答，还可以使用一种解决方案--fetch。

请注意，fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

fetch用法

fetch可以在现代浏览器中使用，已经挂载到BOM上面，可以直接在谷歌控制台使用，如果要注意 跨域的情况, fetch返回的是一个promise

查看fetch的支持情况：fetch的支持情况

当然，如果不支持fetch也没有问题，可以使用第三方的ployfill来实现：fetch-ployfill

简单使用

// 通过fetch获取百度的错误提示页面
// 
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
  .then((res) => {
    console.log(res.text())  // res.text() 是promise对象
  }).then((res) => {
    console.log(res)
  })

fetch API

    fetch(url[, option])

url:

定义要获取的资源。这可能是：

• 一个 url 字符串，包含要获取资源的 URL
• 一个 Request 对象。

option: option 可选

一个配置项对象，包括所有对请求的设置。可选的参数有：

• method: 请求使用的方法，如 GET、POST等。
• headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
• credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
• cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 * force-cache 或者 only-if-cached 。
• redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
• referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
  referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
• integrity: 包括请求的 subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

对于请求携带的参数：

• get请求直接携带在url中类似于

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

• post请求则在option.body中设置， 类似于

// 第一种
var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response))


// 第二种
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

自定义请求对象：

// myRequest
var myHeaders = new Headers();
// 自定义request
var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

检测请求是否成功

// 通过response.ok 来判断
fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

Headers对象

使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

Body

不管是 请求还是 响应都能够包含body对象. body也可以是以下任意类型的实例.

• ArrayBuffer
• ArrayBufferView (Uint8Array and friends)
• Blob/File
• string
• URLSearchParams
• FormData

Body 类定义了以下方法 (这些方法都被 Request 和 Response所实现)以获取body内容. 这些方法都会返回一个被解析后的 promise对象和数据.

• arrayBuffer()
• blob()
• json()
• text()
• formData()

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
})

response对象

属性

• Response.ok 只读
  包含了一个布尔值来标示该Response成功(状态码200-299) 还是失败.
• Response.status 只读
  包含Response的状态码 (例如, 200 成功)

...

方法

• response.text()
  读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为USVString格式的promise对象
• response.json()
  读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为JSON格式的promise对象

...同 body,因为Response实现了 Body的方法

// response.blob
var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

参考来自

• mdn