Fetch API介绍及使用Fetch发送请求 |
您所在的位置：网站首页 › ajax请求示例 › Fetch API介绍及使用Fetch发送请求 |
|
Fetch API
Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch() 方法来跨网络异步获取资源。 与AJAX的区别Fetch 规范与 jQuery.ajax() 主要有三种方式的不同： 当接收到一个代表错误的 HTTP 状态码， 即使响应的 HTTP 状态码是 404 或 500。从 fetch() 返回的 Promise **不会被标记为 reject，**相反，会标记为 resolve （但是会把 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。 fetch() 可以接收跨域 cookies；也可以使用 fetch() 建立起跨域会话。 fetch 不会发送 cookies。除非你使用了credentials 的初始化选项 Fetch()示例给fetch() 提供一个参数指明资源路径，会返回一个包含响应结果的promise。当然它只是一个 HTTP 响应，为了获取JSON的内容，我们需要使用 json() 方法： 默认发送GET请求 fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data));带参数的GET请求： var id=1 fetch(`https://www.easy-mock.com/mock/5f507e38a758c95f67d6eb42/fetch/getmsg?id=${id}`) .then(response => response.json()) .then(data => console.log(data));发送POST请求 var data={ id:'1', } fetch('https://www.easy-mock.com/mock/5f507e38a758c95f67d6eb42/fetch/postmsg',{ method:'POST', body:data }) .then(response => response.json()) .then(data => console.log(data)); Fetch()用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。 语法 fetch(input,{init}); 参数input——定义要获取的资源，可以是： 一个 USVString 字符串，包含要获取资源的 URL。 一个 Request 对象。init—— 可选 | 一个配置项对象，包括所有对请求的设置。可选的参数有： var myInit={ //请求的 body 信息 //如：Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象 body: JSON.stringify(data), //这里必须匹配 'Content-Type' //注意 GET 或 HEAD 方法的请求不能包含 body 信息。 //请求的 cache 模式。//如：default, no-cache, reload, force-cache, only-if-cached cache: 'no-cache', //请求的 credentials。//包括：omit、same-origin，include credentials: 'same-origin', //请求的头信息 headers: { 'user-agent': 'Mozilla/4.0 MDN Example', 'content-type': 'application/json' }, //请求使用的方法 //如：GET, POST, PUT, DELETE等 method: 'POST', //请求的模式 //如 cors、 no-cors 或者 same-origin。 mode: 'cors', //重定向模式 //如 follow|自动重定向, error|如果产生重定向将自动终止并且抛出一个错误, manual|手动处理重定向 redirect: 'follow', //USVString //如 no-referrer、client或一个 URL。默认是 client referrer: 'no-referrer', } 发送带凭据的请求 //发送包含凭据的请求 fetch('https://example.com', { credentials: 'include' }) //如果你只想在请求URL与调用脚本位于同一起源处时发送凭据 fetch('https://example.com', { credentials: 'same-origin' }) //确保浏览器不在请求中包含凭据 fetch('https://example.com', { credentials: 'omit' }) 上传json数据 var data = {username: 'example'}; fetch('https://example.com/profile', { method: 'POST', body: JSON.stringify(data), headers: new Headers({ 'Content-Type': 'application/json' }) }).then(res => res.json()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response)); 上传文件 var formData = new FormData(); var fileField = document.querySelector("input[type='file']");// 获取 元素 formData.append('username', 'abc123'); formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', { method: 'PUT', body: formData }) .then(response => response.json()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response)); 上传多个文件 var formData = new FormData();/ var photos = document.querySelector("input[type='file'][multiple]"); formData.append('title', 'My Vegas Vacation'); // formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入 for (let i = 0; i < photos.files.length; i++) { formData.append('photo', photos.files[i]); } fetch('https://example.com/posts', { method: 'POST', body: formData }) .then(response => response.json()) .then(response => console.log('Success:', JSON.stringify(response))) .catch(error => console.error('Error:', error)); 检测请求是否成功如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。类似以下代码： 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); }); 自定义请求对象 var myHeaders = new Headers(); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; var myRequest = new Request('flowers.jpg', myInit); fetch(myRequest).then(function(response) { return response.blob(); }).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }); 与xml的区别与xml不同的是，Fetch 可以很容易地被其他技术使用，例如 Service Workers。它还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义，使之应用于更多场景。 下面是Fetch API的三个接口：Headers、Rquest、Response： 1.HeadersHeaders 接口允许您对HTTP请求和响应头执行各种操作。 包括检索，设置，添加和删除。可以通过 Headers()构造函数来创建一个你自己的 headers 对象 方法 append()——给现有的header添加一个值, 或者添加一个未存在的header并赋值. delete()——从Headers对象中删除指定header. entries()——以 迭代器 的形式返回Headers对象中所有的键值对 get()——以 ByteString 的形式从Headers对象中返回指定header的全部值 has()——以布尔值的形式从Headers对象中返回是否存在指定的header示例 let myHeaders = new Headers(); myHeaders.append('Content-Type', 'text/xml'); //可以传一个多维数组或者对象字面量来创建： myHeaders = new Headers({ "Content-Type": "text/plain", "X-Custom-Header": "ProcessThisImmediately", }); //内容可以获取与修改 console.log(myHeaders.has("Content-Type")); // true console.log(myHeaders.has("Set-Cookie")); // false myHeaders.append("X-Custom-Header", "AnotherValue"); console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"] myHeaders.delete("X-Custom-Header"); console.log(myHeaders.getAll("X-Custom-Header")); // [ ] 2.RequestRequest接口用来表示资源请求。可以通过 Request()构造函数来创建一个你自己的 Request对象 属性 method——只读| 包含请求的方法 url——只读| 包含请求的url headers——只读| 包含请求相关的Headers对象 mode——只读| 包含请求模式 credentials——只读| 包含请求的证书 cache——只读| 包含请求的缓存模式示例 //示例1 const myRequest = new Request('http://localhost/flowers.jpg');//创建一个request对象 const myURL = myRequest.url; // http://localhost/flowers.jpg const myMethod = myRequesthod; // GET const myCred = myRequest.credentials; // omit //示例2 const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'}); const myURL = myRequest.url; // http://localhost/api const myMethod = myRequesthod; // POST const myCred = myRequest.credentials; // omit //可以将Request对象作为参数传递给fetch() fetch(myRequest) .then(response => response.blob()) .then(blob => { myImage.src = URL.createObjectURL(blob); }); 3.ResponseResponse 接口呈现了对一次请求的响应数据。Response实例是在 fetch() 处理完 promise 之后返回的。你也可以通过 Response()构造函数来创建一个你自己的 Response对象 属性 headers——只读| 包含此 Response 所关联的 Headers对象 ok——只读| 包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299） redirected——只读| 表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目 status——只读| 包含 Response 的状态码 （例如 200 表示成功） statusText——只读| 包含了与该 Response 状态码一致的状态信息（例如，OK对应 200） type——只读| 包含 Response 的类型（例如，basic、cors） url——只读| 包含 Response 的URL示例 调用了 fetch()获取一张图片并将其显示在 HTML 的 IMG 标签中 , fetch() 函数返回了一个 Promise，它使用 Response 对象进行解析.。你会注意到，由于我们正在请求一张图片，我们需要运行blob为响应提供正确的 MIME 类型 const image = document.querySelector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { const objectURL = URL.createObjectURL(blob); image.src = objectURL; }); BodyBody mixin 提供了与 response/request 中的 body 有关的方法，可以定义它的内容形式以及处理方式。 Body定义了以下方法（这些方法都被 Request 和Response所实现）以获取 body 内容。这些方法都会返回一个被解析后的Promise对象和数据 arrayBuffer() blob() json() text() formData() |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |