JavaScript异步编程
回调函数
把函数 A 传给另一个函数 B 调用,那么函数 A 就是回调函数。
function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}
processUserInput(greeting);
回调函数的缺点
回调地狱
// 伪代码
ajax('a.json', (res1) => {
console.log(res1);
ajax('b.json', (res2) => {
console.log(res2);
ajax('c.json', (res3) => {
console.log(res3);
});
});
});
单线程:JavaScript这语言被设计的时候本来就是单线程的
异步:程序执行后,不会马上开始生效,而是过一会儿才开始行动
为什么要用promise(承诺)?
为了能使回调函数以更优雅的⽅式进⾏调⽤,在 ES6 语法中,新增了⼀个名为 Promise 的新规范。
promise有承诺的意思,表示未来的某一时刻,会返回一些东西,可以这样理解
Promise
定义
Promise是一个对象,可以用同步的表现形式来书写异步代码
好处
- 1、可以很好地解决回调地狱的问题(避免了层层嵌套的回调函数)。
- 2、语法简洁、可读性强,便于后期维护。
- 3、Promise 对象提供了简洁的 API,使得管理异步操作更加容易。比如多任务等待合并。
伪代码
// 伪代码1
myPromise()
.then(
function () {},
function () {}
)
.then(
function () {},
function () {}
)
.then(
function () {},
function () {}
);
// 伪代码2
是时候展现真正的厨艺了()
.然后(买菜)
.然后(做饭)
.然后(洗碗);
使用步骤
- new Promise()构造一个实例
- 传入参数resolve和reject
- 用promise.then()和promise.catch()返回处理结果
例子
isPregnant是true所有走了resolve这里
const isPregnant=true;
const promise =new Promise((resolve,reject)=>{
if(isPregnant){
resolve('孩子他爹');
}else{
reject("老公")
}
});
promise
.then(name=>{
console.log("男人是:"+name);
})
.catch(name=>{
console.log("男人是:"+name);
})
.finally(()=>{
console.log('男人和女人最终结婚了');
});
promise 对象的 3 个状态
- 初始化
- 成功
- 失败
当 new Promise()执行之后,promise 对象的状态会被初始化为pending
,这个状态是初始化状态。new Promise()
这行代码,括号里的内容是同步执行的。括号里可以再定义一个 异步任务的 function,function 有两个参数:resolve 和 reject。如下:
- 如果请求成功了,则执行 resolve(),此时,promise 的状态会被自动修改为 fulfilled。
- 如果请求失败了,则执行 reject(),此时,promise 的状态会被自动修改为 rejected
(2)promise.then()方法:只有 promise 的状态被改变之后,才会走到 then 或者 catch。也就是说,在 new Promise()的时候,如果没有写 resolve(),则 promise.then() 不执行;如果没有写 reject(),则 promise.catch() 不执行。
then()
括号里面有两个参数,分别代表两个函数 function1 和 function2:
- 如果 promise 的状态为 fulfilled(意思是:如果请求成功),则执行 function1 里的内容
- 如果 promise 的状态为 rejected(意思是,如果请求失败),则执行 function2 里的内容
形象表示
失败:reject,用catch返回
成功:resolve,用then返回