一、前言
在前后端分离项目中,前端请求后端接口得到后端数据,完成页面内容的渲染或功能状态的判断,已经成为常规操作。那么,关于前端如何请求后端接口获取并解析数据,主要有哪些方式呢:
1. 刷新页面:最直接但是最体验最差的一种方式
2. form表单:会触发页面跳转,无法实现页内重复请求
3. ifream:比较消耗性能,且控制成本过高
4. Ajax - 使用XMLHttpRequest对象进行异步请求,极大的提高了用户体验,实现了页内请求
5. Fetch - Ajax的替代者,浏览器内置方法,封装了Promise机制,优化了异步问题
6. jQuery - 一种前端框架,封装了数据请求模块,但体积较大
7. axios、request等众多第三方开源库:对原生方法的二次封装,各有优劣势,百家争鸣
本文主要介绍浏览器内置请求方法fecth。
二、关于Fetch API
- Fetch是浏览器内置API,在浏览器环境中,可以通过顶层对象
window
获取。 - Fetch 提供了对
Request
和Response
(以及其他与网络请求有关的)对象的通用定义。说明Fetch的目标不仅仅是浏览器环境,将来在服务器环境中也有可能提供对Fetch的支持。 - 在使用Fetch发送请求或者获取资源时,需要使用
fetch()
方法。 fetch()
方法必须接受一个参数:要请求的路径,和一个可选参数Request
对象。无论请求成功与否,它都返回一个Promise
对象
- 请求成功时,会得到请求的
Response
对象 - 请求失败时,会得到一个
TypeError
- 需要注意的是:当接收到一个代表错误的 HTTP 状态码时(如404),从
fetch()
返回的Promise
不会被标记为reject
,仅当网络故障时或请求被阻止时,才会标记为reject
。但fetch会修改resolve
返回值的ok
属性为false
。
三、fetch() 方法的基本使用
// 请求成功,resolve
const url = "https://gitee.com/api/v5/users/liyangyf";
fetch(url).then( response=>console.log(response) ) // 此时resolve得到的是response对象
// 请求成功,resolve,但后端返回404
const url = "https://gitee.com/api/v5/users/liyangyf-test";
fetch(url).then( response=>console.log(response) )
需要注意的是,此时拿到的仅仅是Response
对象,如果需要更进一步获取到接口数据,必须进一步解析Response
对象。
const url = "https://gitee.com/api/v5/users/liyangyf";
fetch(url).then( response=>response.json() ) // 将response数据解析成json
.then( json=>console.log(json) )
一、关于
Response
对象常见同步属性解析:
Response.ok
:布尔值,表示请求是否成功。true
对应 HTTP 请求的状态码 200 到 299,false
对应其他状态码。Response.status
:数值,表示 HTTP 回应的状态码(如200,表示成功请求)Response.statusText
:字符串,表示 HTTP 回应的状态信息(如请求成功后,服务器返回"OK")Response.url
:请求的 URL。如果 URL 存在跳转,该属性返回的是最终 URL。Response.type
:请求的类型。可能的值:
basic
:普通请求,即同源请求cors
:跨域请求error
:网络错误opaque
:如果fetch()
请求的type
属性设为no-cors
,就会返回这个值,详见请求部分。表示发出的是简单的跨域请求,类似form
表单的那种跨域请求。opaqueredirect
:如果fetch()
请求的redirect
属性设为manual
,就会返回这个值,详见请求部分。
Response.redirected
属性返回一个布尔值,表示请求是否发生过跳转。二、关于
Response
对象读取内容方法解析:
response.text()
:得到文本字符串,如html数据。response.json()
:得到 JSON 对象。response.blob()
:得到二进制 Blob 对象。response.formData()
:得到 FormData 表单对象。response.arrayBuffer()
:得到二进制 ArrayBuffer 对象,如流媒体文件,视频音频类
四、携带参数的请求
- get方式携带参数:
Fetch API规定,GET方式传输数据时,无法通过请求参数
options
直接发送数据,只能将数据拼接到url进行发送
let url = "http://icodeilife.club:3000/api/pro/search";
// 准备要发送的数据
const query = {
sKey:"小米10pro"
}
// 将数据拼接到url
url += "?" + queryParse(query);
// 配置请求参数
const options = {method: "GET"}
fetch(url, options).then(res=>res.json()).then(json=>{
console.log(json)
})
// 解析query数据
function queryParse(query){
let queryText = "";
for(let key in query){
queryText += `${key}=${query[key]}&`;
}
return queryText.slice(0,-1);
}
- post方式携带参数
相对来说,POST方式发送数据就方便多了,可以直接在
options
中进行配置,但需要注意设置headers
对象的Content-type
属性为application/x-www-form-urlencoded; charset=UTF-8
let url = "http://icodeilife.club:3000/api/user/register";
// 准备要发送的数据
const query = {
username: "杨树林",
password: "123456",
tel: 17612345678,
code: 6666
}
// 配置请求参数
const options = {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: queryParse(query)
}
fetch(url, options).then(res=>res.json()).then(json=>{
console.log(json);
})
// 解析query数据
function queryParse(query){
let queryText = "";
for(let key in query){
queryText += `${key}=${query[key]}&`;
}
return queryText.slice(0,-1);
}
- 关于
fetch()
方法的第二个参数options
的完整配置属性有
const options = {
method: "POST",
headers: {
"Content-Type": "text/plain;charset=UTF-8"
},
body: "key1=value1&key2=value2",
referrer: "about:client",
referrerPolicy: "no-referrer-when-downgrade",
mode: "cors",
credentials: "same-origin",
cache: "default",
redirect: "follow",
integrity: "",
keepalive: false,
signal: undefined
};
fetch()
请求的底层用的是 Request() 对象的接口,参数完全一样,因此options
的各项配置和Request()
的配置相同。其中:
method
:HTTP 请求的方法,POST
、DELETE
、PUT
都在这个属性设置。
headers
:一个对象,用来定制 HTTP 请求的标头。
body
:POST 请求的数据体。
cache
:指定如何处理缓存。
default
:默认值,先读缓存;no-store
:请求服务器,不更新缓存;reload
:请求服务器,更新缓存;no-cache
:将服务器资源与本地缓存比较,有新版本使用服务器资源,否则使用缓存;force-cache
:缓存优先,只有不存在缓存的情况下,才请求远程服务器;only-if-cached
:只检查缓存,如果缓存里面不存在,将返回504错误。
mode
:指定请求的模式。
cors
:默认值,允许跨域请求;same-origin
:只允许同源请求;no-cors
:请求方法只限于 GET、POST 和 HEAD,相当于提交表单所能发出的请求。
credentials
:是否发送 Cookie。
same-origin
:默认值,同源请求时发送,跨域请求时不发送;include
:发送;omit
:不发送。
signal
:指定一个 AbortSignal 实例,用于取消fetch()
请求。见下一节↓↓↓
keepalive
:布尔值,页面卸载时,告诉浏览器在后台保持连接,继续发送数据。
redirect
:HTTP 跳转的处理方法。
follow
:默认值,fetch()
跟随 HTTP 跳转;error
:如果发生跳转,fetch()
就报错;manual
:fetch()
不跟随 HTTP 跳转,但是response.url
属性会指向新的 URL,response.redirected
属性会变为true
,由开发者自己决定后续如何处理跳转。
integrity
:指定一个哈希值,用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。
- 如,下载文件时,检查文件的 SHA-256 哈希值是否相符,确保没有被篡改。
referrer
:用于设定fetch()
请求的referer
标头。
referrerPolicy
:指定了HTTP头部referer
字段的规则
no-referrer-when-downgrade
:默认值,总是发送Referer
标头,除非从 HTTPS 页面请求 HTTP 资源时不发送;no-referrer
:不发送Referer
标头;origin
:Referer
标头只包含域名,不包含完整的路径;origin-when-cross-origin
:同源请求Referer
标头包含完整的路径,跨域请求只包含域名;same-origin
:跨域请求不发送Referer
,同源请求发送;strict-origin
:Referer
标头只包含域名,HTTPS 页面请求 HTTP 资源时不发送Referer
标头;strict-origin-when-cross-origin
:同源请求时Referer
标头包含完整路径,跨域请求时只包含域名,HTTPS 页面请求 HTTP 资源时不发送该标头;unsafe-url
:不管什么情况,总是发送Referer
标头
五、终止fetch()
请求
fetch()
请求发送以后,如果长时间没有完成,可以使用AbortController
对象提前终止请求。
// 创建 AbortController 实例
let controller = new AbortController();
let signal = controller.signal;
// 配置对象的signal属性必须指定接收 AbortController 实例发送的信号controller.signal
fetch(url, {
signal: signal
});
// 监听取消事件
signal.addEventListener('abort',() => console.log('abort!'));
// 发出取消信号
controller.abort();
// 查看取消信号是否已经发出
console.log(signal.aborted); // true
请求超时的处理
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);
try {
let response = await fetch('/long-operation', {
signal: controller.signal
});
} catch(err) {
if (err.name == 'AbortError') {
console.log('Aborted!');
} else {
throw err;
}
}
以上
如需深入了解,请参考Fatch API。