前言
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Fetch API 提供了一个获取资源的接口(包括跨域).任何使用过 XMLHttpRequest 的人都能轻松上手,但新的 API 提供了更强大和灵活的功能集.
这是官方 API 中的第一句话,可以看出 fetch 是 ES6 中新增的,用于取代 XMLHttpRequest 的网络请求框架,它比之更强大.下面我们来下它的使用.
Fetch
fetch 返回的其实是一个 Promise 函数.我们先来看一个完整的请求代码:
const url = '192.168.32.45:8081/login.shtml'fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'fll',
password: '123'
})
}).then((response) = >{
if (response.status == 200) {
return response
}
}).then((data) = >{
return data.text()
}).then((text) = >{
console.log('请求成功', text)
}).
catch((err) = >{
console.log('请求错误', err)
})
fetch 的参数有两个参数,第一个是 url,就是请求的路径;
Request
另一个是 Request 对象,包括一下几种:
method: 请求方法:GET,POST.
headers:请求头信息,形式为 Headers 对象或者 ByteString.上述例子就是一个 json 请求的请求头.
body: 请求参数:可能是一个 Blob,BufferSource,FormData,URLSearchParams 或者 USVString 对象.注意 GET 或 HEAD 方法的请求不能包含 body 信息.
mode:请求的模式.如 cors, no-cors, same-origin, navigate
cache: 缓存模式,如 default, reload, no-cache
更多的信息请看 Reques
如果你对请求头不太熟悉的,可以看这里 Headers
Response
上面我们说了 fetch 的返回的是一个 Promise 对象.然后会携带 Response 对象.
Response 对象:
属性:
status (number) - HTTP 请求结果参数,在 100-599 范围, 200 为成功
statusText (String)
- 服务器返回的状态报告
ok (boolean) - 如果返回 200 表示请求成功则为 true
headers (Headers) - 返回头部信息,下面详细介绍
url(String) 请求的地址
方法:
text() 以 string 的形式生成请求 text
json 生成 JSON.parse(responseText) 的结果
blob 生成一个 Blob
arrayBuffer() 生成一个 ArrayBuffer
formData 生成格式化的数据,用于其他请求
其他方法:
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean)
判断是否存在该信息头
get(name) (String) 获取信息头的数据
getAll(name)(Array)
获取所有头部数据
set(name, value) 添加 headers 的内容
delete(name) 删除 header 的信息
forEach 循环读取 header 的信息
参考资料
ES6 的 Fetch 异步请求 Fetch 官方 API fetch API 和 Ajax(XMLHttpRequest)的差异
来源: https://juejin.im/post/5a60031f6fb9a01cb0495d1d