Web API: Fetch

20th August 2020 at 2:19pm
Web API

Fetch API 是 ES2015 中提出的新 API。

它相对 XMLHttpRequest 的接口设计更佳。基于 Promise 的接口也使得代码编写更加方便。同时功能强大。但是它也存在一些问题:

  • 错误处理不直观。比如服务器返回 HTTP 500 时,代码仍然会走进 resolve 分支而不是 reject 分支,你需要自行检查 response.ok
    fetch("http://httpstat.us/500")
        .then(function(response) {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            return response;
        }).then(function(response) {
            console.log("ok");
        }).catch(function(error) {
            console.log(error);
        });
  • 获取数据需要两步。response.json() 不返回数据,而是返回一个 Promise 对象:
    fetch("http://httpstat.us/500")
        .then(function(response) {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            return response.json();
        }).then(function(response) {
            console.log(response);
        }).catch(function(error) {
            console.log(error);
        });
  • 不能设置超时
  • 不能取消请求
  • 不支持上传进度
  • 默认发起请求时不会带上 cookie

Axios 库是更佳的选择。类似 Python 的 requests,简单易用,默认的行为足够好。