JS之Fetch API

演变

场景：前端与服务器的异步通信

1. 阶段一：Ajax（Asynchronous JavaScript and XML），是基于用脚本操作http请求的web应用框架，并非一项具体的技术，其涉及的js技术，即XMLHttpRequest（XHR）

2. 阶段二：由于XHR使用不方便，许多前端库对其进行了封装，例如jQuery的$.ajax方法，实现了promise接口

3. 阶段三：出现 Fetch API 新的技术标准，是一个HTML5的 API

fetch 基本用法

   const url = 'https://picsum.photos/v2/list'
   fetch(url)
     .then(response => response.json())
     .then(res => console.log(res))
     

结合async/await语法

  const getData = async () => {
    const url = 'https://picsum.photos/v2/list'
    try {
      const response = await fetch(url)
      const data = await response.json()
      console.log(data)
    } catch (error) {
      console.log(error)
    }
  }

Fetch参数配置示例

fetch(url, {
  method: 'POST',
  body: JSON.stringify({
  	name: '张三',
  	age: 14,
  	id: 0,
  }),
  credentials: 'include',
  mode: 'cors',
  headers: {
  	'content-type': 'application/json'
  }
}).then(response => response.json())
  .then(function(data) {
      console.log(data)
  });

两种使用方式

Promise fetch(String url, [, Object options])

Promise fetch(Request req, [, Object options])

掌握相关 Headers类、Request类 Response类的属性和方法

参考文章 了解 Fetch API