CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript中的ajax和fetch

发布时间:『 2017-08-07 17:38』  博客类别:WEB前端  阅读(164) 评论(0)

今天在MDN上看到了一篇关于Fetch API的文章。对比我们一直用到的ajax,Fetch有很多的优势。Fetch API,它是W3C的正式标准,但是目前还未被浏览器广泛的支持。

自从Google的Gmail带动的Ajax的兴起,ajax就一发不可收拾。XMLHttpRequest也逐渐被各个前端框架所采用。但是ajax毕竟有一些局限。因此w3c推出了fetch进行异步请求。本文正是基于此来学习和讲解Fetch API。

Ajax请求

普通的Ajax请求,用XHR发送一个json请求一般是这样的:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "www.xttblog.com"); 
xhr.responseType = 'json'; 
xhr.onload = function(){ 
    console.log(xhr.response); 
}; 
xhr.onerror = function(){ 
    console.log("error") 
} 
xhr.send();

使用fetch实现的方式:

fetch(url).then(function(response){ 
    return response.json(); 
}).then(function(data){ 
    console.log(data) 
}).catch(function(e){ 
    console.log("error") 
})

也可以用async/await的方式

try{ 
    let response = await fetch("www.xttblog.com"); 
    let data = await response.json(); 
    console.log(data); 
} catch(e){ 
    console.log("error") 
}

用了await后,写异步代码感觉像同步代码一样爽。await后面可以跟Promise对象,表示等待Promise resolve()才会继续下去执行,如果Promise被reject()或抛出异常则会被外面的try...catch捕获。

fetch api各浏览器的支持情况

如果不需要支持落后的IE系列浏览器,就可以放心大胆的使用吧!

当然也可以使用第三方的polyfill 库!https://github.com/github/fetch

Fetch API提供了一个获取资源的接口(包括跨网络)。任何使用过 XMLHttpRequest 的人都会熟悉它,但是新的API提供了更强大和更灵活的功能集。

概念和用法

Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。

它还提供了一种定义,将 CORS 和 HTTP 原生的头信息结合起来,取代了原来那种分离的定义。

发送请求或者获取资源,需要使用 GlobalFetch.fetch 方法。它在很多接口中都被实现了,比如 Window 和 WorkerGlobalScope。所以在各种环境中都可以用这个方法获取到资源。

 fetch() 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 promise 对象,resolve 对应请求的 Response。你也可以传一个可选的第二个参数—— init(参考 Request)。

一旦 Response 被返回,就有一些方法可以使用了,比如定义内容或者处理方法(参考 Body)。

你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他 API 的结果(比如,service workers 中的 FetchEvent.respondWith)。

Fetch 接口

  • GlobalFetch:包含了 fetch() 方法,用于获取资源。

  • Headers:相当于 response/request 的头信息,可以修改它,或者针对不同的结果做不同的操作。

  • Request:相当于一个资源请求。

  • Response:相当于请求的响应

fetch的主要优点是

  • 语法简洁,更加语义化

  • 基于标准的Promise实现,支持async/await

  • 同构方便

但是也有它的不足

  • fetch请求默认是不带cookie的,需要设置fetch(url, {credentials: 'include'})

  • 服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject。

fetch参数说明

  • url:定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一个 Request 对象。

options(可选参数)一个配置项对象,包括所有对请求的设置。可选的参数有:

  • method: 请求使用的方法,如 GET、POST。

  • headers: 请求的头信息,形式为 Headers 对象或 ByteString。

  • body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

  • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。

  • credentials: 请求的 credentials,如 omit、same-origin 或者 include。

  • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

response响应对象。一个 Promise,resolve 时回传 Response 对象:

response属性:

  • status (number) - HTTP请求结果参数,在100–599 范围

  • statusText (String) - 服务器返回的状态报告

  • ok (boolean) - 如果返回200表示请求成功则为true

  • headers (Headers) - 返回头部信息,下面详细介绍

  • url (String) - 请求的地址

response方法:

  • text() - 以string的形式生成请求text

  • json() - 生成JSON.parse(responseText)的结果

  • blob() - 生成一个Blob

  • arrayBuffer() - 生成一个ArrayBuffer

  • formData() - 生成格式化的数据,可用于其他的请求

其他一些不常用的方法:

  • clone()克隆

  • Response.error()响应错误信息

  • Response.redirect()重定向

  • response.headers响应头部

  • has(name) (boolean) - 判断是否存在该信息头

  • get(name) (String) - 获取信息头的数据

  • getAll(name) (Array) - 获取所有头部数据

  • set(name, value) - 设置信息头的参数

  • append(name, value) - 添加header的内容

  • delete(name) - 删除header的信息

  • forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

参考资料


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   JavaScript     ajax     fetch  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有