开发者社区> 桃子红了呐> 正文

Fetch API

简介:
+关注继续查看

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'
});

你可以使用appendhasgetsetdelete方法来设置请求的头。要使用Request头,需要创建一个Request实例:

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

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

我们来看看ResponseRequest都可以做什么。

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

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 572064792 | Nodejs:329118122 做人要厚道,转载请注明出处!






















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/6286611.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16681 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13665 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14909 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36499 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29349 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23607 0
4267
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载