AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。
传统的ajax: XMLHttpRequest(XHR),配置麻烦,写起来不好看。
非传统ajax: Fetch,基于promise,配置方便,简单明了。
fetch最简单的用法就是
fetch(url,{配置参数,可选})
.then(
对返回的包含响应结果的promise进行处理
这个promise只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们需要使用 json()
方法
如return response.json();
)
.then(
对第一个then返回的对象进行处理
)
上面的代码使用then
方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
配置参数比如:
body: JSON.stringify(data), // must match 'Content-Type'
header cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
fetch规范
- 当接收到一个代表错误的 HTTP 状态码时,从
fetch()
返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。
相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok
属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
- 默认情况下,
fetch
不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
基于第一条规范检测请求是否成功:
fetch('flowers.jpg').then(function(response) {
if(response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ', error.message);
});
对于那些不支持fetch的浏览器 有 A window.fetch JavaScript polyfill. http://github.github.io/fetch/