Fetch

前端开发的很大一部分工作需要与服务器进行交互，无论任何交互都是发起一个网络请求。在 JavaScript 中提供了网络请求的工具，也就是 fetch 对象。

fetch 的语法：

let promise = fetch(url[, options])

• url：请求的 URL。
• options：可选的参数，详情参考 fetch - MDN。

fetch 返回的是一个 promise 对象。

https://3yya.com/hello.txt 是一个纯文本文件，可以将网址复制到浏览器打开看看，我们试着用 fetch 读取内容并显示：

使用 async、await：

$$jsdemo$$
$$edit$$
async function getData() {
    let response = await fetch("https://3yya.com/hello.txt")
    let text = await response.text()
    console.log(text) //  你好，这里是三眼鸭~
}

getData()

使用 then：

$$jsdemo$$
$$edit$$
let promise = fetch("https://3yya.com/hello.txt")
promise
    .then(function (response) {
        return response.text()
    })
    .then(function (text) {
        console.log(text) //  你好，这里是三眼鸭~
    })

https://3yya.com/hello.json 是一个 JSON 格式的文件，我们试着读取其中的 JSON 内容：

使用 async、await：

$$jsdemo$$
$$edit$$
async function getData() {
    let response = await fetch("https://3yya.com/hello.json")
    let json = await response.json()
    console.log(json) //  {name: '三眼鸭', hello: '你好~'}
}

getData()

使用 then：

$$jsdemo$$
$$edit$$
let promise = fetch("https://3yya.com/hello.json")
promise
    .then(function (response) {
        return response.json()
    })
    .then(function (json) {
        console.log(json) //  {name: '三眼鸭', hello: '你好~'}
    })

对于 response 有以下属性：

• status：HTTP 状态码。
• ok：HTTP 状态码为 200 - 299 间为 true ，否则为 false 。

并且有以下基于 promise 的方法：

• text：返回文本的内容。
• json：返回经过 JSON 解析的内容。
• formData：返回 FormData 对象。
• blob：返回二进制的数据。
• arrayBuffer：返回 ArrayBuffer 的二进制数据。

实战：使用 POST 方法发布一个帖子

接口文档： 发布帖子

$$jsdemo$$
$$edit$$
async function createPost() {
    let response = await fetch(
        "https://3yya.com/u/d8cf630cf5f367cc/rest/app/posts",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json", // 表明内容是 JSON 格式
            },
            body: JSON.stringify({
                content: "三眼牛牛",
            }), // 序列化对象
        }
    )
    console.log(response.status) // 200，状态码
}

createPost()

创建的帖子可以打开帖子列表接口看到， https://3yya.com/u/d8cf630cf5f367cc/rest/app/posts 。