Open vaakian opened 2 years ago
fetch
是现在浏览器都内置的API,使用Promise
,不使用回调函数,与axios
的请求语法非常相似。
fetch
没有自带拦截器,开发者可以自行实现。
fetch
不会将字符串json
数据自动转换,依然是字符串,但可以调用data.json()
取得,该方法返回一个promise
。
fetch(url, config)
.then(data => console.log(data)) // 不会自动将json字符串转换为对象
// 手动转json
fetch(url, config)
.then(data => data.json())
.then(jsonData => console.log(jsonData)) // 此时为json对象
取消请求可以用AbortController
对象来处理,超时抛弃可以用Promise.race
,但Promise.race
方法请求会继续直到自然终止,只是代码逻辑上将该请求抛弃,不再处理。
const controller = new AbortController();
fetch('https://api.github.com/users/vaakian', {
signal: controller.signal
}).then(data => console.log(data))
.catch(reason => console.log(reason));
// 200ms超时取消
setTimeout(controller.abort, 200);
Promise.race方法实现请求超时,但浏览器请求不会被终止。
const countTimeout = function (duration) {
return new Promise((resolve, reject) => {
setTimeout(() => reject('request timeout'), duration)
});
}
let request = fetch('https://api.github.com/users/vaakian');
// 200ms后超时
Promise.race([request, countTimeout(200)])
.then(data => console.log(data))
.catch(reason => console.log(reason))
老大哥了,最先出现的异步加载方案。
jQuery
中的$.ajax
方法,就是基于XHR
来封装实现的。
与axios
和fetch
不同的是,$.ajax
和原生XHR
都通过回调函数来获取返回值。
原因也很好猜,Promise
在XHR
时代还没有出现过,回调函数是普遍用法。
function sendAjax() {
//构造表单数据
let formData = new FormData();
// url中params的参数
// formData.append('user', 'vaakian');
// formData.append('id', '786');
//创建xhr对象
let xhr = new XMLHttpRequest();
//设置xhr请求的超时时间
xhr.timeout = 3000;
//设置响应返回的数据格式
xhr.responseType = "json";
//创建一个 get 请求,采用异步
xhr.open('get', '/users/vaakian', true);
//注册相关事件回调处理函数
xhr.onload = function(e) {
iconsole.log(this.responseText);
};
xhr.ontimeout = function(e) { ... };
xhr.onerror = function(e) { ... };
xhr.upload.onprogress = function(e) { ... };
//发送数据
xhr.send(formData);
}
Axios
特点:拦截器,前后端通用。
取消请求方法有两种,一种是上面的工厂模式创建单例,多个请求可以复用一个
cancelTtoken
,可以一次canel
多个请求。 而下面这种,每个请求单独设定一个cancelToken
,一次canel
一个请求,多用于重复请求时,取消上一个请求。如何捕获cancel的请求? 当一个请求被取消后,promise状态会变为
reject
,然后在catch
中使用axios
提供的isCancel
来判断是否是被取消了。