JavaScript 基础
函数进阶
深入数据和类型
运算符
浏览器存储
Document
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
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 。