Fetch API

2024年4月25日 305次阅读 来源: 小红星闪啊闪

Fetch API

一个隐蔽最深的隐秘就是AJAX的完成底层的XMLHttpRequest，这个要领原本并非造出来干这事的。如今有许多文雅的API包装XHR，然则这远远不够。因而有了fetch API。我们来看看这个API的基础用法。最新的浏览器都已支撑这个要领了。

XMLHttpRequest

XHR关于我来讲太甚庞杂，用起来大概是如许的：

// 最先XHR这些
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
  }
}

// 发送要求.
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);

固然我们的JavaScript框架能够让我们情愿去用XHR，然则你看到的只是一个简朴的例子。

基础的Fetch用法

fetch要领能够在window作用域中找到。第一个参数是你要接见的URL：

fetch('https://davidwalsh.name/some/url', {
    method: 'get'
}).then(function(response) {
    
}).catch(function(err) {
    // Error :(
});

fetch会返回一个Promise作为效果：

// 简朴的返回效果处置惩罚
fetch('https://davidwalsh.name/some/url').then(function(response) {
    
}).catch(function(err) {
    // Error :(
});

// 更高等的链式处置惩罚
fetch('https://davidwalsh.name/some/url').then(function(response) {
    return //...
}).then(function(returnedValue) {
    // ...
}).catch(function(err) {
    // Error :(
});

Request头

要求能不能天真运用就在因而否能天真的设置要求的头。能够运用new Headers():

// 建立一个空的Headers实例
var headers = new Headers();

// 增加内容
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// 搜检Headers的值
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// 删除一个Header
headers.delete('X-My-Custom-Header');

// 增加初始值
var headers = new Headers({
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'CustomValue'
});

你能够运用append, has, get, set和delete要领来设置要求的头。要运用Request头，须要建立一个Request实例：

var request = new Request('https://davidwalsh.name/some-url', {
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

fetch(request).then(function() { /* handle response */ });

我们来看看Response和Request都能够做什么。

Request

一个Request实例代表了一个fetch的要求部份。给fetch 传入一个request你能够发出高等的、定制的要求：

  • method – GET, POST, PUT, DELETE, HEAD

  • url – URL of the request

  • headers – associated Headers object

  • referrer – referrer of the request

  • mode – cors, no-cors, same-origin

  • credentials – should cookies go with the request? omit, same-origin

  • redirect – follow, error, manual

  • integrity – subresource integrity value

  • cache – cache mode (default, reload, no-cache)

一个简朴的Request看起来是如许的：

var request = new Request('https://davidwalsh.name/users.json', {
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

// 用起来
fetch(request).then(function() { /* handle response */ });

只要第一个参数，要求的URL，是必需的。一旦Request建立，它一切的属性都是只读的。须要注重的是Request有一个clone要领，这个要领在Worker API里运用fetch 的时刻很有效。fetch的简化挪用要领：

fetch('https://davidwalsh.name/users.json', {
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
}).then(function() { /* handle response */ });

Respone

运用fetch的then要领会取得一个Response实例。你也能够本身建立一个。

  • type – basic, cors

  • url

  • useFinalURL – Boolean for if url is the final URL

  • status – status code (ex: 200, 404, etc.)

  • ok – Boolean for successful response (status in the range 200-299)

  • statusText – status code (ex: OK)

  • headers – Headers object associated with the response.

// 在service worker测试的时刻
// 运用new Response(BODY, OPTIONS)建立一个response
var response = new Response('.....', {
    ok: false,
    status: 404,
    url: '/'
});

// The fetch的 `then`会取得一个response实例
fetch('https://davidwalsh.name/')
    .then(function(responseObj) {
        console.log('status: ', responseObj.status);
    });

Response实例也供应了以下的要领：

  • clone() – Creates a clone of a Response object.

  • error() – Returns a new Response object associated with a network error.

  • redirect() – Creates a new response with a different URL.

  • arrayBuffer() – Returns a promise that resolves with an ArrayBuffer.

  • blob() – Returns a promise that resolves with a Blob.

  • formData() – Returns a promise that resolves with a FormData object.

  • json() – Returns a promise that resolves with a JSON object.

  • text() – Returns a promise that resolves with a USVString (text).

处置惩罚JSON

假定你有一个要求会返回JSON。

fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) { 
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(j); 
});

固然也能够用JSON.parse(jsonString)，然则json要领越发简朴易用。

处置惩罚基础的Text/HTML返回

不是一切的接口都返回JSON花样的数据，所以还要处置惩罚一些Text/HTML范例的返回效果。

fetch('/next/page')
  .then(function(response) {
    return response.text();
  }).then(function(text) { 
      // <!DOCTYPE ....
      console.log(text); 
  });

处置惩罚Blob返回

假如你想要经由过程fetch加载一个blob的话，会有一点差别：

fetch('https://davidwalsh.name/flowers.jpg')
    .then(function(response) {
      return response.blob();
    })
    .then(function(imageBlob) {
      document.querySelector('img').src = URL.createObjectURL(imageBlob);
    });

POST Form数据

另一个经常会碰到的状况是运用AJAX提交表单数据。

fetch('https://davidwalsh.name/submit', {
    method: 'post',
    body: new FormData(document.getElementById('comment-form'))
});

末了

fetchAPI很好用，然则如今还不许可作废一个要求。无论如何，有了fetch以后，我们能够简朴的发出AJAX要求了。更多关于fetch 的内容能够参考Github下他们的repo。

    原文作者：小红星闪啊闪
    原文地址: https://segmentfault.com/a/1190000008124551
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞