异步、期约
异步返回值
function test1(a, b, callback) {
var a = a + b;
// 异步操作
setTimeout(function () {
// 异步执行完成获得数据作为参数返回给回调函数。
callback(a);
}, 1000);
}
// 传入数据并利用回调函数获得异步结果。
test1(1, 2, (res) => {
console.log(res); // 3
});
失败处理
function double(value, success, failure) {
setTimeout(() => {
try {
if (
!(Object.prototype.toString.call(value) === "[object Object]") ||
!("name" in value)
) {
throw "传入的数据有误!";
}
success(value["name"] + "加油!");
} catch (e) {
failure(e + "继续努力!");
}
});
}
double(
{ name: "小卡车" },
(res) => {
console.log(`success: ${res}`);
},
(error) => {
console.log(`error: ${error}`);
}
);
// 输出 success: 小卡车加油!
double(
{},
(res) => {
console.log(`success: ${res}`);
},
(error) => {
console.log(`error: ${error}`);
}
);
// 输出: error: 传入的数据有误!继续努力!
Promise
- Promise.resolve
let p = Promise.resolve({ name: "小卡车", age: 20 });
p.then((res) => {
console.log(res); // { name: '小卡车', age: 20 }
});
// Promise.reject
let p1 = Promise.reject("Error");
p1.then(
(res) => {
console.log("success");
},
(err) => {
console.log(err);
}
)
.then(() => {
return {
name: "小卡车",
};
})
.then((res) => {
console.log(res);
})
.then(() => {
return Promise.resolve({ age: 20 });
})
.then((res) => {
console.log(res);
})
.finally(() => {
console.log("finally");
});
// Error
// { name: '小卡车' }
// { age: 20 }
// finally
let p2 = Promise.resolve("小卡车");
p2.then((res) => {
console.log(res);
}).finally(() => {
console.log("Finally");
});
// 小卡车
// Finally
let p3 = Promise.resolve({ name: "小卡车" });
p3.then((res) => {
console.log(res);
})
.finally(() => {
return Promise.reject("Error reject");
})
.catch((err) => {
console.log(err);
});
/*
{ name: '小卡车' }
Error reject */
let p4 = new Promise(() => {
throw "ERROR 错误";
});
p4.catch((err) => {
console.log(err);
});
异常
let p5 = new Promise((resolve, reject) => {
try {
throw Error("错误");
} catch (e) {
reject(e);
}
});
p5.catch((onrejected) => {
console.log("138", onrejected);
}).finally(() => {
console.log("finally");
});
- 执行顺序
console.log("1");
let p = new Promise((resolve, reject) => {
console.log("2");
setTimeout(() => {
console.log("3");
resolve("小卡车");
console.log("4");
});
console.log("5");
});
console.log("6");
p.then((res) => {
console.log("7");
console.log(res);
});
console.log("8");
setTimeout(() => {
console.log("9");
});
/*
1
2
5
6
8
3
4
7
小卡车
9
*/
- 期约连锁
let p = new Promise((resolve, reject) => {
console.log("first");
resolve();
});
p.then(() => {
console.log("second");
})
.then(() => {
console.log("third");
})
.then(() => {
console.log("fourth");
});
/*
first
second
third
fourth
*/
let p1 = new Promise((resolve, reject) => {
console.log("p1");
setTimeout(resolve, 0, "111");
});
p1.then(
(res) =>
new Promise((resolve, reject) => {
console.log("p2", res);
setTimeout(resolve, 0, "222");
})
).then((res) => {
console.log("p3", res);
});
/*
p1
p2 111
p3 222
*/
- 生成期约的工厂函数
function delayResolve(str) {
return new Promise((resolve, reject) => {
console.log(str);
resolve();
});
}
delayResolve("p1")
.then(() => delayResolve("p2"))
.then(() => delayResolve("p3"));
/*
p1
p2
p3
*/
- Promise.all()
let p2 = Promise.all([Promise.resolve(1), Promise.resolve(2)]);
setTimeout(console.log, 0, p2); // Promise { [ 1, 2 ] }
p2.then((res) => {
console.log("p2:", res); // p2: [ 1, 2 ]
});
// 会转换为 Promise.resolve()
let p3 = Promise.all([1, 2]);
setTimeout(console.log, 0, p3); // Promise { [ 1, 2 ] }
p3.then((res) => {
console.log("p3:", res); // p3: [ 1, 2 ]
});
// 等价于 Promise.resolve()
let p4 = Promise.all([]);
setTimeout(console.log, 0, p4); // Promise { [] }
p4.then((res) => {
console.log("p4:", res); // p4: []
});
// 合成的期约要全部解决后才解决
let p5 = Promise.all([
Promise.resolve("p5 - 1"),
new Promise((resolve) => {
resolve("p5 - 2");
}),
]);
setTimeout(console.log, 0, p5); // Promise { [ 'p5 - 1', 'p5 - 2' ] }
p5.then((res) => {
console.log("p5:", res); // p5: [ 'p5 - 1', 'p5 - 2' ]
});
function test1(x) {
return x + 2;
}
let pp = new Promise((resolve, reject) => {
resolve(1);
});
pp.then(test1).then(res => {
console.log(res); // 3
});
function test2(x) {
return x + 3;
}
let z = [test1, test2].reduce((promise, fn) => promise.then(fn), Promise.resolve(2));
setTimeout(console.log, 0, z); // Promise { 7 }