你不需要jQuery(三) 新AJAX方法fetch()


Posted in Javascript onJune 14, 2016

XMLHttpRequest来完成ajax有些老而过时了。

fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是,Fetch API 使用了 Promises,它让接口更简单、简洁,避免了回调的复杂性,省去了使用复杂的 XMLHttpRequest API。

如果你之前未使用过Promises,你应该先看看《JavaScript Promises 用法》这篇文章。

一、基本Fetch用法

让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL,获取JSON格式的返回结果。

XMLHttpRequest
一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形,而且需要调用 open() 和 send() 方法。

function reqListener() { 
 var data = JSON.parse(this.responseText); 
 console.log(data); 
}

function reqError(err) { 
 console.log('Fetch Error :-S', err); 
}

var oReq = new XMLHttpRequest(); 
oReq.onload = reqListener; 
oReq.onerror = reqError; 
oReq.open('get', './api/some.json', true); 
oReq.send();

Fetch
我们的 fetch 请求的代码基本上是这样的:

fetch('./api/some.json') 
 .then( 
 function(response) { 
  if (response.status !== 200) { 
  console.log('Looks like there was a problem. Status Code: ' + 
   response.status); 
  return; 
  }

  // Examine the text in the response 
  response.json().then(function(data) { 
  console.log(data); 
  }); 
 } 
 ) 
 .catch(function(err) { 
 console.log('Fetch Error :-S', err); 
 });

我们首先检查请求响应的状态是否是 200,然后才按照 JSON 对象分析响应数据。

fetch()请求获取的内容是一个 Stream 对象。也就是说,当我们调用 json() 方法时,返回的仍是一个 Promise 对象,这是因为对 stream 的读取也是异步的。

返回数据对象的元数据(Metadata)

在上面的例子中,我看到了服务器响应对象Response的基本状态,以及如何转换成JSON。返回的相应对象Response里还有很多的元数据信息,下面是一些:

fetch('users.json').then(function(response) { 
 console.log(response.headers.get('Content-Type')); 
 console.log(response.headers.get('Date'));

 console.log(response.status); 
 console.log(response.statusText); 
 console.log(response.type); 
 console.log(response.url); 
});

响应的对象Response类型

当我们执行一个fetch请求时,响应的数据的类型response.type可以是“basic”, “cors” 或 “opaque”。这些类型用来说明应该如何对待这些数据和数据的来源。

当请求发起自同一个域时,响应的类型将会是“basic”,这时,对响应内容的使用将没有任何限制。

如果请求来自另外某个域,而且响应的具有CORs头信息,那么,响应的类型将是“cors”。 “cors” 和 “basic” 类型的响应基本是一样的,区别在于,“cors”类型的响应限制你只能看到的头信息包括`Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified`, 和 `Pragma`。

“opaque”类型的响应说明请求来自另外一个域,并且不具有 CORS 头信息。一个opaque类型的响应将无法被读取,而且不能读取到请求的状态,无法看到请求的成功与否。当前的 fetch() 实现无法执行这样的请求。

你可以给fetch请求指定一个模式,要求它只执行规定模式的请求。这个模式可以分为:

“same-origin” 只有来自同域的请求才能成功,其它的均将被拒绝。
“cors” 允许不同域的请求,但要求有正确的 CORs 头信息。
“cors-with-forced-preflight” 在执行真正的调用前先执行preflight check。
“no-cors” 目前这种模式是无法执行的。
定义模式的方法是,使用一个参数对象当做fetch方法的第二个参数:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'}) 
 .then(function(response) { 
 return response.text(); 
 }) 
 .then(function(text) { 
 console.log('Request successful', text); 
 }) 
 .catch(function(error) { 
 log('Request failed', error) 
 });

串联 Promises

Promises最大的一个特征是,你可以串联各种操作。对于fetch来说,我们可以在各个fetch操作里共享一些逻辑操作。

在使用JSON API时,我们需要检查每次请求响应的状态,然后解析成JSON对象。使用promise,我们可以简单的将分析状态和解析JSON的代码放到一个单独函数里,然后当做promise返回,这样就是代码更条理了。

function status(response) { 
 if (response.status >= 200 && response.status < 300) { 
 return Promise.resolve(response) 
 } else { 
 return Promise.reject(new Error(response.statusText)) 
 } 
}

function json(response) { 
 return response.json() 
}

fetch('users.json') 
 .then(status) 
 .then(json) 
 .then(function(data) { 
 console.log('Request succeeded with JSON response', data); 
 }).catch(function(error) { 
 console.log('Request failed', error); 
 });

我们用 status 函数来检查 response.status 并返回 Promise.resolve() 或 Promise.reject() 的结果,这个结果也是一个 Promise。我们的fetch() 调用链条中,首先如果fetch()执行结果是 resolve,那么,接着会调用 json() 方法,这个方法返回的也是一个 Promise,这样我们就得到一个分析后的JSON对象。如果分析失败,将会执行reject函数和catch语句。

你会发现,在fetch请求中,我们可以共享一些业务逻辑,使得代码易于维护,可读性、可测试性更高。

用fetch执行表单数据提交

在WEB应用中,提交表单是非常常见的操作,用fetch来提交表单数据也是非常简洁。

fetch里提供了 method 和 body 参数选项。

fetch(url, { 
 method: 'post', 
 headers: { 
  "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
 }, 
 body: 'foo=bar&lorem=ipsum' 
 })
 .then(json) 
 .then(function (data) { 
 console.log('Request succeeded with JSON response', data); 
 }) 
 .catch(function (error) { 
 console.log('Request failed', error); 
 });

在Fetch请求里发送用户身份凭证信息

如果你想在fetch请求里附带cookies之类的凭证信息,可以将 credentials 参数设置成 “include” 值。

fetch(url, { 
 credentials: 'include' 
})

显而易见,fetch API相比起传统的 XMLHttpRequest (XHR) 要简单的多,相比起jQuery里提供ajax API也丝毫不逊色。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
深入理解jQuery 事件处理
Jun 14 #Javascript
使用jquery获取url及url参数的简单实例
Jun 14 #Javascript
JS操作JSON方法总结(推荐)
Jun 14 #Javascript
JavaScript Promise 用法
Jun 14 #Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 #Javascript
Javascript缓存API
Jun 14 #Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php实现用户登陆简单实例
2017/04/04 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
NumPy统计函数的实现方法
2020/01/21 Python
详解python如何引用包package
2020/06/07 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
物流仓管员岗位职责
2013/12/04 职场文书
自主招生自荐信指南
2014/02/04 职场文书
师德建设实施方案
2014/03/21 职场文书
国际贸易专业求职信
2014/06/04 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Django框架之路由用法
2022/06/10 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS