javascript基础学习系列三百六十五：fetch用法 |
您所在的位置：网站首页 › fetch用法js › javascript基础学习系列三百六十五：fetch用法 |
|
fetch()方法是暴露在全局作用域中的，包括主页面执行线程、模块和工作线程。调用这个方法， 浏览器就会向给定 URL 发送请求。 1. 分派请求fetch()只有一个必需的参数 input。多数情况下，这个参数是要获取资源的 URL。这个方法返回 一个期约: let r = fetch('/bar'); console.log(r); // PromiseURL 的格式(相对路径、绝对路径等)的解释与 XHR 对象一样。 请求完成、资源可用时，期约会解决为一个 Response 对象。这个对象是 API 的封装，可以通过它 取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载转换为有用的形式， 如下所示: fetch('bar.txt') .then((response) => { console.log(response); }); // Response { type: "basic", url: ... } 2. 读取响应读取响应内容的最简单方式是取得纯文本格式的内容，这要用到 text()方法。这个方法返回一个 期约，会解决为取得资源的完整内容: fetch('bar.txt') .then((response) => { response.text().then((data) => { console.log(data); }); }); // bar.txt 的内容 内容的结构通常是打平的: Fetch API fetch('bar.txt') 26 .then((response) => response.text()) .then((data) => console.log(data)); // bar.txt 的内容 3. 处理状态码和请求失败Fetch API 支持通过 Response 的 status(状态码)和 statusText(状态文本)属性检查响应状 态。成功获取响应的请求通常会产生值为 200 的状态码，如下所示: 网络请求与远程资源 fetch('/bar') .then((response) => { console.log(response.status); // 200 console.log(response.statusText); // OK });请求不存在的资源通常会产生值为 404 的状态码: fetch('/does-not-exist') .then((response) => { console.log(response.status); // 404 console.log(response.statusText); // Not Found });请求的 URL 如果抛出服务器错误会产生值为 500 的状态码: fetch('/throw-server-error') .then((response) => { console.log(response.status); // 500 console.log(response.statusText); // Internal Server Error });可以显式地设置 fetch()在遇到重定向时的行为(本章后面会介绍)，不过默认行为是跟随重定向 并返回状态码不是 300~399 的响应。跟随重定向时，响应对象的 redirected 属性会被设置为 true， 而状态码仍然是 200: fetch('/permanent-redirect') .then((response) => { // 默认行为是跟随重定向直到最终URL // 这个例子会出现至少两轮网络请求 // /permanent-redirect -> console.log(response.status); // 200 console.log(response.statusText); // OK console.log(response.redirected); // true });在前面这几个例子中，虽然请求可能失败(如状态码为 500)，但都只执行了期约的解决处理函数。 事实上，只要服务器返回了响应，fetch()期约都会解决。这个行为是合理的:系统级网络协议已经成 功完成消息的一次往返传输。至于真正的“成功”请求，则需要在处理响应时再定义。 通常状态码为 200 时就会被认为成功了，其他情况可以被认为未成功。为区分这两种情况，可以在 状态码非 200~299 时检查 Response 对象的 ok 属性: fetch('/bar') .then((response) => { console.log(response.status); // 200 console.log(response.ok); // true }); fetch('/does-not-exist') .then((response) => { console.log(response.status); // 404 console.log(response.ok); // false });因为服务器没有响应而导致浏览器超时，这样真正的 fetch()失败会导致期约被拒绝: fetch('/hangs-forever') .then((response) => { console.log(response); }, (err) => { console.log(err); }); //(浏览器超时后) // TypeError: "NetworkError when attempting to fetch resource." 违反 CORS、无网络连接、HTTPS 错配及其他浏览器/网络策略问题都会导致期约被拒绝。 可以通过 url 属性检查通过 fetch()发送请求时使用的完整 URL: // xxx.com/xxx/baz 发送的请求 console.log(window.location.href); // https://xxx.com/bar/baz fetch('xxx').then((response) => console.log(response.url)); // https://foo.com/bar/xxx fetch('/xxx').then((response) => console.log(response.url)); // https://foo.com/xxx fetch('//xxx.com').then((response) => console.log(response.url)); // https://xxx.com fetch('https://xxx.com').then((response) => console.log(response.url)); // https://xxx.com |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |