共计 2907 个字符,预计需要花费 8 分钟才能阅读完成。
fetch 简介
Fetch 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的,Fetch 提供了一个更好的替代方法
Fetch API 是基于 Promise 设计,使用了 Promises 来处理结果 / 回调。旧浏览器不支持 Promise,需要使用 polyfill es6-promise。
简单实现
fetch("http://192.168.43.169:8099/someInfo",{method: 'post',})
.then(res=>{console.log(response) // 包含响应结果的 promise,只是一个 HTTP 响应,而不是真的 JSON
return response.json();})
.then(res=>{console.log(res) //js 格式的 json 对象
})
async await 实现更方便
const fetchRequest = async () => {
let response = await fetch("http://192.168.43.169:8099/teacher/resume", {method: 'post',})
let data = await response.json()
console.log(data); //js 格式的 json 对象
}
fetchRequest()
Response 对象
属性:
- status:整数 (默认值为 200) 为 response 的状态码
- statusText:字符串 (默认值为 ”OK”), 该值与 HTTP 状态码消息对应.
- ok:如上所示, 该属性是来检查 response 的状态是否在 200-299(包括 200,299) 这个范围内. 该属性返回一个 Boolean 值.
方法:处理包含返回结果的 promise 对象的数据
例如 response.json()
处理包含 json 结果的 promise 对象
- clone() – 创建一个新的 Response 克隆对象.
- error() – 返回一个新的, 与网络错误相关的 Response 对象.
- redirect() – 重定向, 使用新的 URL 创建新的 response 对象..
- arrayBuffer() – Returns a promise that resolves with an + ArrayBuffer.
- blob() – 返回一个 promise, resolves 是一个 Blob.
- formData() – 返回一个 promise, resolves 是一个 FormData 对象.
- json() – 返回一个 promise, resolves 是一个 JSON 对象.
- text() – 返回一个 promise, resolves 是一个 USVString (text).
Request 对象
创建 request 对象
request = new Request()
属性:
- method:支持 GET, POST, PUT, DELETE, HEAD
- url:请求的 URL
- headers:对应的 Headers 对象
- referrer:请求的 referrer 信息
- mode:可以设置 cors, no-cors, same-origin
- credentials:设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
- redirect:follow, error, manual
- integrity:subresource 完整性值 (integrity value)
- cache:设置 cache 模式 (default, reload, no-cache)
let request = new Request("http://192.168.43.169:8099/teacher/resume",{
method: 'post',
headers: new Headers({'Content-Type': 'text/plain'})
})
fetch(request)
.then(res=>{console.log(res);
return res.json();})
.then(res=>{console.log(res)
})
header
创建 header 对象
let headers = new Headers();
headers 方法:
- Headers.append():给现有的 header 添加一个值, 或者添加一个未存在的 header 并赋值.
- Headers.delete():从 Headers 对象中删除指定 header.
- Headers.entries():以 迭代器 的形式返回 Headers 对象中所有的键值对.
- Headers.get():以 ByteString 的形式从 Headers 对象中返回指定 header 的全部值.
- Headers.has():以布尔值的形式从 Headers 对象中返回是否存在指定的 header.
- Headers.keys():以迭代器的形式返回 Headers 对象中所有存在的 header 名.
- Headers.set():替换现有的 header 的值, 或者添加一个未存在的 header 并赋值.
- Headers.values():以迭代器的形式返回 Headers 对象中所有存在的 header 的值.
- Headers.getAll():用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了,Headers.get() 方法现在返回所有的值而不是一个。
设置 header 通过属性或者方法都可以
属性形式:传一个多维数组或者对象字面量
Header = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
方法形式:
var Header = new Headers();
Header.append("Content-Type", "text/plain");
Header.append("Content-Length", content.length.toString());
Header.append("X-Custom-Header", "ProcessThisImmediately");
fetch 坑
- 当接收到一个代表错误的 HTTP 状态码时,从 fetch() 返回的 Promise 不会被标记为 reject,即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve(但是会将 resolve 的返回值的 ok 属性设置为 false),仅当网络故障时或请求被阻止时,才会标记为 reject。
- Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: ‘include’})
- 不能中断,没有 abort、terminate、onTimeout 或 cancel 方法 Fetch 和 Promise 一样,一旦发起,不能中断,也不会超时,只能等待被 resolve 或 reject。
正文完
发表至: javascript
2019-06-28