你不需要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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JS实现滑动插件
Jan 15 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
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php 获取本地IP代码
2013/06/23 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
php利用header函数下载各种文件
2016/08/24 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
pandas取出重复数据的方法
2019/07/04 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python用什么编辑器进行项目开发
2020/06/17 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
公司成立感言
2014/01/11 职场文书
企业办公室岗位职责
2014/03/12 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014年督导工作总结
2014/11/19 职场文书
《包身工》教学反思
2016/02/23 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python