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()
)
}