Fetch()学习笔记。

Fetch API提供了一个获取资源的接口(包括跨域)。任何使用过XMLHttpRequest的人都能轻松上手,但新的API提供了更强大和灵活的功能集。Fetch提供了对Request和Response对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或则是其它处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。它还提供了一种定义,将CORS和HTTP原生的头信息结合起来,取代了原来那种分离的定义。发送请求或则获取资源,需要使用WindowOrWorkerGlobalScope.fetch方法。它在很多接口中都被实现了,比如Window和WorkerGlobalScope。所以在各种环境中都可以用这个方法获取到资源。fetch()必须接受一个参数–资源的路径。无论请求成功与否,它都返回一个Promise对象,resolve对应请求的Response。你也可以传一个可选的第二个参数init(参见Request)。一旦Response被返回,就有一些方法可以使用了,比如定义内容或者处理方法(参见Body)。你也可以通过Request()和Response()的构造函数直接创建请求和响应,但是我们不建议这么做。它们应该被用于创建其它API的结果。
*当接收到一个代表错误的HTTP状态码时,从fetch()返回的Promise不会被标记为reject,即使该HTTP响应的状态码是404或500.相反,它会将Promise状态标记为resolve(但是会将resolve的返回值的ok属性设置为false),仅当网络故障时或请求被阻止时,才会标记为reject。
*默认情况下,fetch不会从服务器端发送或接收任何cookie,如果站点依赖于用户session,则会导致未经认证的请求(要发送cookies,必须设置credentials).
进行fetch请求。一个基本的fetch请求设置起来很简单。看看下面的代码:
fetch(‘https://azu.github.io/promises-book/json/comment.json’).then(function(response){
return response.json()
}).then(function(myJson){
console.log(myJson)
})
这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径,然后返回一个包含响应结果的promise(一个Response对象)。当然它只是一个HTTP响应,而不是真的JSON。为了获取JSON的内容,我们需要使用json()方法。fetch()接收第二个可选参数,一个可以控制不同配置的init对象:参考fetch(),查看所有可选的配置和更多描述。
postData(”,{answer:42}).then(
data=>console.log(data)
).catch(
error = >console.error(error)
)
function postData(url,data){
return fetch(url,{
body:JSON.stringify(data),
cache:’no-cache’,
credentials:’same-origin’,
headers:{
‘user-agent’:’Mozilla/4.0 MDN Example’,
‘content-type’:’application/json’
},
method:’POST’,
mode:’cors’,
redirect:’follow’,
referrer:’no-referrer’,
}).then(
response=>response.json()
)
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理