1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

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