ES6 Fetch API基础教学

在当ES6已经推出但还未普及的时候，如果有人问：“如何用JavaScript向服务器请求数据？”一定会有人回答用$.ajax。$.ajax几乎是最简单又容易上手的请求方式了，不必再使用原生JavaScript中又长又臭的XMLHttpRequest()，在ES6中出现了替代ajax的 Fetch API。它有以下优点：

1. fetch API 使用 Promise 来处理异步操作，这使得链式调用更加简洁和易于管理。而 $.ajax 使用回调函数，这可能导致回调地狱（callback hell）的问题。
2. fetch 提供了更现代和简洁的语法，使得代码更易于编写和阅读。
3. 更清晰的错误处理。
4. 使用 fetch 不需要依赖 jQuery 或其他库，这减少了全局命名空间的污染。
5. fetch 允许你以多种格式处理请求和响应，例如 JSON、Blob、ArrayBuffer 或文本。

Fetch

Fetch 是 ES6 的新语法，主要是搭配 Promise （ Promise 的基本用法 ）来执行请求网站和请求后获取 Response 的处理方式。

以下示例的请求都会从 httpbin.org 这个网站里挑选，它提供了各种不同的请求方式，在测试时是个很棒的工具。

GET

GET 是请求中最基本的类型，在 Fetch 中默认的请求类型也是 GET 用起来就像下面：

fetch('https://httpbin.org/get')
    .then((response) => {
        console.log(response)
        return response.json()
        //return response.text()
    }).then((myJson) => {
        console.log(myJson)
    })

Fetch 接收了一个 url 作参数，并用 then 接收此次请求的相关信息：

请求返回的 response 信息内内包含了请求的 url 和用来判断请求是否成功的 status 状态等，在 response 中有两个内置函数可以用来得到请求返回的数据。

一个是上方 then 中 return 使用的 .json() ，能够将返回的数据以对象的方式传给第二个 then 接收，另一个是 .text() ，当返回的数据无法转换为对象时，则会将请求数据以字符串方式取出。

使用 .json() 将 response 的请求数据取出

用 .text() 将 response 的请求数据取出

POST

与 GET 不同的是，使用 POST 请求时需另外在 method 属性内指定 POST 方式，且多了 body 属性指定要发送的数据：

fetch('https://httpbin.org/post', {
    method: 'POST',
    body: JSON.stringify(
        {
            name: 'GQSM',
            age: 25
        }
    )
}).then((response) => {
    return response.json()
}).then((myJson)=>{
    console.log(myJson)
})

Fetch 在未指定请求方式的情况下都是使用 GET ，但是 GET 本身无法在请求中借由 body 发送数据，因此在有 body 属性的状态下，未替 method 指定为 POST 或其他可带 body 的请求方式时，会出现以下错误：

默认的请求方式 GET 无法指定 body

需要注意的是， body 内的数据需使用 JSON.stringify 将对象转换成字符串类型，否则 server 端会无法正确获取到数据，以下是 data 发送到 server 的差别：

未使用 JSON.stringify

使用了 JSON.stringify

未使用 JSON.stringify 的请求会直接将对象强制转为字符串，变成 [object Object] 发送至 server ，使用了正确转换的请求在 server 端则是能接收到正确的内容。

请求失败

在 Fetch 中，请求失败时不会有像 $.ajax 中有 error 可以直接捕捉，取而代之的是要以 response 的 status 的属性值判断，当 status 的值不等于 200 时，将在 .then 中使用 throw 创建一个错误，并由 .catch 接收错误内容处理：

fetch('https://httpbin.org/status/500', {
}).then((response) => {
    if(response.status !== 200)
        throw new Error(response.status)
    return response.json()
}).then((myJson) => {
    console.log(myJson)
}).catch((error) => {
    console.log(`错误代码为 ${error}`)
})