0、前言
处在前后端分离开发模式的时代，前端向后端请求数据似乎已经司空见惯，在稍微复杂一点的业务中就可能遇到串行接口的情况，这就会产生回调嵌套，回调过深会导致代码可维护性差，因此需要一种解决回调过深的方案：promise。ES6 promise语法精深，本文只介绍工作中最常用到的promise相关知识。
1、promise语法
- 创建promise
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
//实例
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
创建promise最重要的操作就是确定何时执行resolve方法
- Promise.prototype.then方法
- 虽然then方法接受两个函数作为参数，但一般只写成功回调，并用catch代替失败回调
//bad
promise.then(successFn,errorFn)
//good
promise.then(successFn).catch(errorFn)
- 根据successFn返回的结果，then有不同的返回值,then方法总是返回一个新的promise：
2.1 当successFn返回普通值v1时，then返回原来的promise，并将v1作为后续then方法的成功回调参数；
2.2 当successFn返回已经被resolved的promise时，then返回原来的promise，并将successFn返回的promise值作为后续then方法的成功回调参数；
2.3 当successFn返回一个未被resolved的promise1时，then方法返回的promise将与promise1具有一致的状态，可以看成then方法返回了promise1
- Promise.prototype.resolve方法
根据resolve方法接受的参数类型分为：
1、promise，直接返回这个promise
2、普通类型（不包含then方法的对象），返回一个立即resolve的promise
3、不传参数，返回一个立即resolve的promise - Promise.prototype.all方法
接受promise组成的数组，并能使结果有序返回。缺点是一旦其中一个promise被rejected，所有数据都拿不到了。返回的结果以数组形式存储，可按下标依次取出
2、promise运用场景
1、单个请求promise化
//异步加载图片
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
loadImageAsync(url).then(successFn).catch(handleError)
2、多个串行请求promise化
场景：先拿用户信息，再获取数据
//方案1
getUserInfo().then(getData).then(successFn).catch(handleError)
方案2
async function fn(){
let userInfo=await getUserInfo();
let data=await getData(userInfo);
return data;
}
fn().then(successFn).catch(errorFn);
方案2的async函数写法使得串行的链式调用变成了同步写法，语义更加清楚
3、多个并行请求promise化
场景：一次性拿不同tab下的数据
方案1：使用Promise.all()方法
let tab1_promise=getHotData();
let tab2_promise=getLatestData();
let arr=[tab1_promsie,tab2_promise];
Promise.all(arr).then(([tab1_data,tab2_data])=>handleFn).catch(errorFn);
这种方式显然有风险，可考虑如下方案2
方案2：顺序执行promise
let arr=[tab1_promise,tab2_promise];
arr.reduce((task,promise)=>{
return task.then(()=>return promise).then(successFn);
},Promise.resolve());
这种方案可以对每个promise的返回值单独处理，不必等到所有数据一起返回才处理，更加灵活
3、总结
- 创建一个promise的关键在于确定resolve的执行时机
- then方法总是返回一个新的promise
- 使用这种写法promise.then(successFn).catch(errorFn),而不是promise.then(successFn,errorFn)
- Promise.reslove()可以创造一个立即resolve的promise，结合reduce方法可使代码更加精炼
- async函数基于Promise，可解决串行链式调用过长的问题，并且语义清楚，推荐使用
- Promise.all方法有风险，尽量不用
4、超时和可取消的Promise
// 可取消的Promise（本质上并没有取消请求，只是不用promise的返回值而已）
export default function makeCancelable(promise){
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val) =>
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
);
promise.catch((error) =>
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
}
// 超时的Promise
export const makeTimeoutPromise = ({ timeout = 300000, callback,promise }) => {
// 默认5分钟超时
let hasTimeout = false;
let timer = setTimeout(() => {
hasTimeout = true;
}, timeout);
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val) =>
hasTimeout ? reject({hasTimeout: true}) : resolve(val)
).catch((error) =>
hasTimeout ? reject({hasTimeout: true}) : reject(error)
).finally(()=>timer && clearTimeout(timer))
}
return wrappedPromise;
};
掌握以上这些，应该能够应对工作中JS的异步处理了
https://mp.weixin.qq.com/s/cN40pHBfttZ3O2oEbVPAcg
