fetch API 用于发起 http 请求和处理响应。

fetch 是 XMLHttpRequest 的现代替代方案。与使用回调函数的 XMLHttpRequest 不同，fetch 基于 Promise而且与现代 Web 的一些特性）进行了集成。按理说，

async function getData {
const url = "https://example.org/products.json";try {
const response = await fetch;
if {
throw new Error;
}
const result = await response.json;console.log，} catch {
// 请求被 reject 时会进入 catch
console.error;}
}

设置 fetch 的请求方法

fetch 的配置对象中有个 method 属性。专门配置 fetch 的请求方法，比如发起 post 请求，只要把 method 属性设置为 POST 就可以了：
const response = await fetch; `

fetch 配置对象中有个 body 属性。专门用于配置请求体，请求体的作用是向服务端发送数据的，比如 POST 或 PUT 请求的时候，向服务器传递有用的数据。

const response = await fetch,
// …

});其实，`

GET 请求中是不能包含请求体的。如果 GET 请求需要向服务端发送数据的话，则可通过 URL 参数的方式传递。

要将传递给 body 配置的原生 JS 对象用 JSON.stringify 包裹。因为 HTTP 协议传输的数据本质上是文本或二进制流，不支持直接传递 JS 对象。说起来，否则 JS 对象会自动序列化为 字符串从而导致数据传递错误：

Fetch 的配置对象中有个 headers 属性。 用于设置请求头，

Headers用于向服务器提供关于客户端和它所期望接收到内容类型等信息。

再看格式，

js const response = await fetch("https://example.org/post"。{ 至于method，"POST",headers: { "Content-Type": "application/json",},body: JSON.stringify,//…})，

GET 被认为是安全、幂等操作——这代表着 GET 被认为没有副作用且多次执行不会导致结果不同。GET 没有 request body，所以不能像 POST 或 PUT 一样通过 body 配置项进行发送。

仍然可以在 URL 中附加查询参数：

js // Method1. Concatenate URL directly. const userId = '1';const page = '1';

await fetch .n) .n);

// Method2. Use URLSearchParams interface. const params = new URLSearchParams({ 至于id。'1',page: '1',name :'John Doe',// Special characters will be automatically encoded. });

// Method3. Manipulate URLs using URL object. const url = new URL;url.searchParams.append;其实，url.searchParams.append;

当我们通过 Fetch API 获取到一个 Response 对象时,需要从其 Body 中读取内容.

Response 提供以下几种方式来解析不同类型返回值:

• response.json - Parse as JSON
• response.text - Parse as text
• response.blob - Parse as Blob
• response.arrayBuffer - Parse as ArrayBuffer
• response.formData - Parse as FormData

These are all asynchronous methods returning Promises:

js const jsonData = await ).json;

js const plainText = await ).text;

js const imageBlob = await ).blob;

js // arrayBuffer is typically used for low-level binary processing const fileBuffer = await ).arrayBuffer;

js const formValues= await{ return{name:"test"} })).formData;

Using Fetch API