Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和灵活的功能集。
概念和用法
Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。
注意事项:
1. fetch() 必须接受一个参数——资源的路径2. 无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 Response。你也 可以传一个可选的第二个参数init。3. 一旦 Response 被返回,就有一些方法可以使用了,比如定义内容或者处理方法(参见 Body)
参数
Promise<Response> fetch(input[, init]);
Input:1. String类型,URL请求2. Object类型,new Qeuest()Init:1. method: get、post...2. headers: 要添加到请求的任何标头,包含在Headers对象或具有ByteString值的对象文字中。 请注意,某些名称是被禁止的。3. body: 要添加到请求中的正文,请注意,使用GET或HEAD方法的请求不能包含正文。4. mode: 您希望用于请求的模式,例如,cors,no-cors或同源。
举例子
const myImage = document.querySelector('img');let myRequest = new Request('flowers.jpg');fetch(myRequest).then(function(response) { if (!response.ok) { throw new Error('HTTP error, status = ' + response.status); } return response.blob();}).then(function(response) { let objectURL = URL.createObjectURL(response); myImage.src = objectURL;});
const myImage = document.querySelector('img');let myHeaders = new Headers();myHeaders.append('Content-Type', 'image/jpeg');const myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' };let myRequest = new Request('flowers.jpg');fetch(myRequest,myInit).then(function(response) { ... });