feng xiaohan

Fetch

也是用于客户端和服务端数据交互的技术。相对于 xhr,它的更加简洁、易于使用。并且基于 Promise,可以使用链式调用。
但是它不支持超时控制(如果需要则要手动设置 setTimeout),终止请求很麻烦(需要基于一个构造函数 AbortController 完成)

Promise

Fetch 使用

fetch 可以设置两个参数,第一个参数是必填的,也就是访问的 url 地址;第二个参数是一个对象,可以配置一些请求的信息,比如请求方法、请求头、请求体等。

设置好之后 fetch 其实返回的是一个 Promise,在.then()中接收的默认参数其实是一个 response 对象,并不是一个拿到值的结果。

在这个 response 对象中有各种响应的信息,并且在它的原型对象上有一些响应体解析方法,我们需要根据后端返回的格式来调用不同的响应体解析方法来拿到这个结果:

  • text():将响应体解析为纯文本字符串返回;
  • json():将响应体解析为 JSON 格式并返回一个 JS 对象;
  • blob():将响应体解析为二进制数据并返回一个 Blob 对象;
  • arrayBuffer():将响应体解析为二进制数据并返回一个 ArrayBuffer 对象;
  • formData():将响应体解析为 FormData 对象;

然后在第二个.then()中拿到最终的结果。