JavaScript 教程
收录了这篇文章 

一，Fetch API 介绍

Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch()方法来跨网络异步获取资源。

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。

二，基本用法：

fetch('https://test.com/api/info')
 .then(response => response.json())
 .then(json => console.log(json))
 .catch(err => console.log('Request Failed', err)); 

try {
  let response = await fetch('https://test.com/api/info');
  return await response.json();
} catch (error) {
  console.log('Request Failed', error);
}

三，请求

fetch()的第二个参数：定制 HTTP 请求

fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。

fetch(url, optionObj)

上面命令的optionObj就是第二个参数。

HTTP 请求的方法、标头、数据体都在这个对象里面设置。下面是一些示例。

const response = await fetch(url, {
 method: 'POST',
 headers: {
  "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
 },
 body: 'foo=bar&lorem=ipsum',
});

const json = await response.json();

var url = 'https://test.com/v1/auth/login';

var payload = JSON.stringify({
  account: 'admin'
  password: 'adminpwd'
});

var jsonHeaders = new Headers({
  'Content-Type': 'application/json'
});

try {
  var response = await fetch(url, {
    method: 'POST',
    body: payload,
    headers: jsonHeaders
  });

  var responseJson = await response.json();
  if (response.status == 200) {

  } else {

  }
} catch(e) {
  console.log(e);
}

上面示例中，配置对象用到了三个属性。

method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。

headers：一个对象，用来定制 HTTP 请求的标头。

body：POST 请求的数据体。

注意，有些标头不能通过headers属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改。

三，Response 对象

fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。

const response = await fetch(url);

前面说过，Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。

async function fetchText() {
 let response = await fetch('/readme.txt');
 console.log(response.status); 
 console.log(response.statusText);
}

上面示例中，response.status和response.statusText就是 Response 的同步属性，可以立即读取。

标头信息属性有下面这些：

1，Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。

2，Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。

3，Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。

4，Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。

5，Response.type属性返回请求的类型。可能的值如下：

 basic：普通请求，即同源请求。

 cors：跨域请求。

 error：网络错误，主要用于 Service Worker。

 opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似<form>表单的那种跨域请求。

 opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。

6，Response.redirected属性返回一个布尔值，表示请求是否发生过跳转。

读取内容的方法

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

response.text()：得到文本字符串。
response.json()：得到 JSON 对象。
response.blob()：得到二进制 Blob 对象。
response.formData()：得到 FormData 表单对象。
response.arrayBuffer()：得到二进制 ArrayBuffer 对象。

上面5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

更多

文件上传的一个问题，当使用如下 headers 时，上传会失败，提示：“fetch Missing boundary in multipart/form-data”。

let headers = new Headers({ 'Content-Type': 'multipart/form-data' });

解决办法是，不要设置 headers，fetch 默认请求即可，正常上传文件。

参考：

https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

修改时间 2024-09-10