XMLHttpRequest来完成ajax有些老而过时了。
fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是，Fetch API 使用了 Promises，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。
基本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也丝毫不逊色。
$.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
jquery中的ajax方法
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
jquery中的ajax方法参数的用法和他的含义
jquery中的ajax方法参数的用法和他的含义: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(pos ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
jQuery中的$.ajax()方法
jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...
jquery中的ajax方法参数总是记不住，这里记录一下。
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
随机推荐
Suse碎碎念
1. 如何查看Suse的版本号 vmpbos01:~ # lsb_release -d Description: SUSE Linux Enterprise Server 11 (x86_64) vm ...
cacti手册选译(1)
第一章 系统需求 Cacti需要你的系统安装一下软件: RRDTool版本1.0.49及以上,推荐1.4+ MYSQL5.x及以上版本 PHP5.1及以上 支持PHP的web Server如Apach ...
UVa 11014 (莫比乌斯反演) Make a Crystal
这个题是根据某个二维平面的题改编过来的. 首先把问题转化一下, 就是你站在原点(0, 0, 0)能看到多少格点. 答案分为三个部分: 八个象限里的格点,即 gcd(x, y, z) = 1,且xyz均 ...
理解C++11正则表达式(2)
今天有幸(2016/3/19)在上海参加了C++交流会,见到了梦寐已久想见的台湾C++大神老师侯捷,心情十分的激动.侯老师对C++理解的深刻,让人叹为观止.以为他教学的严谨,说话方式娓娓道来,听着非常 ...
Lowest Common Ancestor in Binary Tree
The problem: Given node P and node Q in a binary tree T. Find out the lowest common ancestor of the ...
html页面头部里的meta
作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...
PHP源码阅读strtr
strtr 转换字符串中特定的字符,但是这个函数使用的方式多种. echo strtr('hello world', 'hw', 'ab'); // 第一种 aello borld echo strt ...
Javascript 进阶 面向对象编程 继承的一个样例
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...
jQuery_parent() parents() closest()区别
parent 是找当前元素的第一个父节点,不管匹不匹配都不继续往下找 parents 是找当前元素的所有父节点 closest 是找当前元素的所有父节点 ,直到找到第一个匹配的父节点
【原】 The Linux Command Line- pwd,cd,ls,file,less
pwd - print name of current working directory. cd - change directory ls - list directory contents fi ...
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
