javascript基础学习系列三百六十五：fetch用法_js fetch

fetch()方法是暴露在全局作用域中的，包括主页面执行线程、模块和工作线程。调用这个方法，
浏览器就会向给定 URL 发送请求。

1. 分派请求

fetch()只有一个必需的参数 input。多数情况下，这个参数是要获取资源的 URL。这个方法返回
一个期约:

    let r = fetch('/bar');
     console.log(r); // Promise <pending>
1
2

URL 的格式(相对路径、绝对路径等)的解释与 XHR 对象一样。
请求完成、资源可用时，期约会解决为一个 Response 对象。这个对象是 API 的封装，可以通过它 取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载转换为有用的形式， 如下所示:

   fetch('bar.txt')
      .then((response) => {
        console.log(response);
      });
    // Response { type: "basic", url: ... }
1
2
3
4
5

2. 读取响应

读取响应内容的最简单方式是取得纯文本格式的内容，这要用到 text()方法。这个方法返回一个 期约，会解决为取得资源的完整内容:

    fetch('bar.txt')
       .then((response) => {
         response.text().then((data) => {
           console.log(data);
         });
});
// bar.txt 的内容 内容的结构通常是打平的:
1
2
3
4
5
6
7

Fetch API

  fetch('bar.txt') 26 .then((response) => response.text())
.then((data) => console.log(data));
 // bar.txt 的内容
1
2
3
4

3. 处理状态码和请求失败

Fetch API 支持通过 Response 的 status(状态码)和 statusText(状态文本)属性检查响应状 态。成功获取响应的请求通常会产生值为 200 的状态码，如下所示:

网络请求与远程资源

     fetch('/bar')
      .then((response) => {
        console.log(response.status);     // 200
        console.log(response.statusText); // OK
});
1
2
3
4
5

请求不存在的资源通常会产生值为 404 的状态码:

fetch('/does-not-exist')
      .then((response) => {
        console.log(response.status);     // 404
        console.log(response.statusText); // Not Found
});
1
2
3
4
5

请求的 URL 如果抛出服务器错误会产生值为 500 的状态码:

fetch('/throw-server-error')
      .then((response) => {
        console.log(response.status);     // 500
        console.log(response.statusText); // Internal Server Error
});
1
2
3
4
5

可以显式地设置 fetch()在遇到重定向时的行为(本章后面会介绍)，不过默认行为是跟随重定向 并返回状态码不是 300~399 的响应。跟随重定向时，响应对象的 redirected 属性会被设置为 true， 而状态码仍然是 200:

fetch('/permanent-redirect')
      .then((response) => {
// 默认行为是跟随重定向直到最终URL
// 这个例子会出现至少两轮网络请求
// <origin url>/permanent-redirect -> <redirect url> console.log(response.status); // 200 console.log(response.statusText); // OK console.log(response.redirected); // true
});
1
2
3
4
5
6

在前面这几个例子中，虽然请求可能失败(如状态码为 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
});
1
2
3
4
5
6
7
8
9
10

因为服务器没有响应而导致浏览器超时，这样真正的 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
1
2
3
4
5
6
7
8
9
10
11
12
13