promise 用法
对比传统回调函数与 Pormise 的写法
传统回调函数
// 声明函数
function run(callback) {
let parmas = 0;
if (callback) callback(parmas);
};
function fnStep1(callback) {
let parmas = 123;
if (callback) callback(parmas);
};
function fnStep2(callback) {
let parmas = 456;
if (callback) callback(parmas);
};
function fnStep3(callback) {
let parmas = 789;
if (callback) callback(parmas);
};
// fnStep4 …
// 传统使用回调的写法
run(function (parmas) {
// parmas = 0
console.log(parmas);
fnStep1(function (parmas1) {
// parmas = 123
console.log(parmas1);
fnStep2(function (parmas2) {
// parmas = 456
console.log(parmas2);
fnStep3(function (parmas3) {
// …
// 一直嵌套
});
});
});
});
Promise 的写法
let p = new Promise((resolve, reject) => {
// ? 异步操作，最终调用:
//
const parmas = 0;
resolve(parmas); // fulfilled
// ? 或
// reject(“failure reason”); // rejected
})
p
.then(
(parmas) => {
// parmas，resolve 返回的值
console.log(parmas);
// 你的代码块 code…
return 123; // 返回值给下一个 then
}
)
.then(
(parmas) => {
// parmas，上一个 then 返回的值
console.log(parmas);
// 你的代码块 code…
return 456; // 返回值给下一个 then
}
)
.then(
(parmas) => {
// parmas，上一个 then 返回的值
console.log(parmas);
// 你的代码块 code…
return 789; // 返回值给下一个 then
}
)
Promise 异步回调
Promise 要比传统回调函数更简洁直观，可读性更强。
那如何使用 Promise 进行异步回调? 如何捕获错误？
// 声明函数
function asyncFn(a) {
return new Promise((resolve, reject) => {
a += 1;
setTimeout(function () {
// 使用 resolve 则返回 a
resolve(a);
// 使用 reject 则返回错误，并结束 then 的继续向下执行，并会跳到 catch
// reject(new Error(“fail”));
}, 2000);
});
}
// 执行
asyncFn(1).then(
(a) => {
// 过了 2 秒后接收到 a 值 => 2
console.log(a);
const newVal = 5;
// const newVal = {a: 5};
// const newVal = new Promise((resolve, reject) =>{});
// 返回值可以是数字，字串，对象或者是 Promise
return newVal;
}
).then(
(newVal) => {
// newVal 获得上一个 then 返回的值 或 返回的 Promise 的返回值
}
).catch(
(err)=>{
// 如用到 reject，则会直接跳到此处
console.log(err)
}
);