浏览器中的JavaScript-fetch()请求这是我参与11月更文挑战的第13天, 活动详情查看：2021最后一次更

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

前言

前几篇文章, 我们学习记录了JavaScript 中的几个事件函数 (Event)及事件注册, 另有更文其他各知识点小结的相关阅读: list:

上文学到了事件循环, 本文继续来学习浏览器中的 JavaScript: fetch() 网络请求方法

浏览器中的 JavaScript fetch

fetch() 使得我们书写一个发送基本的 Get请求的代码变得简单: 可以发送 HTTP 和 HTTPS请求,

麻烦的 XMLHttpRequest

记得在封装 ajax 时用的的 XMLHttpRequest 吗? 如下:

let ajax = null
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest()
}
// ...

书写方便的 fetch()

使用 fetch() 发送一个简单的 HTTP 请求只需三步:

调用 fetch(url), 并传入要请求的地址 url
在 HTTP 响应开始到达时可获取到第一步异步返回的响应对象: 然后 .then(), 可通过这个响应对象的某个方法进行读取数据
取得第二步异步返回的响应体, 对数据进行处理

一个基本的 fetch 请求设置起来很简单:

// fetch 发起一个请求 url:
fetch('http://example.com/movies.json')
  .then(function(res) {
    return res.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

// 这里只是最简单的用法: 只提供一个参数用来指定想要 fetch() 到的资源路径url，然后返回一个包含响应结果的 promise（一个 Response 对象）

// 然后(then)链式调用, 第一个 .then() 对数据处理后并返回, 第二个 .then()可以接收经过处理过的的数据并打印.

Calm Down & Carry On!

Buy Less by Know More! 加油!

学习, 记录, 积累是一个漫长的过程!

浏览器中的JavaScript-fetch()请求

前言

浏览器中的 JavaScript fetch

麻烦的 XMLHttpRequest

书写方便的 fetch()

相关更文阅读

Calm Down & Carry On!