【es6入门】好好捋一捋Promise与Async的异步写法,细节满满

文章目录

  • 前言
  • 异步写法出现的原因
    • 解决回调地狱
  • Promise对象
    • 介绍
    • 状态
    • 名字缘由
    • 使用例子
      • 参数
      • then回调
      • then的补充
    • catch()
      • 结合then的执行问题
    • all()
      • 手写类似原理
    • race()
    • finally()
  • Async/await
    • 诞生原因
    • 使用
      • await执行顺序
      • await可以被try catch捕捉
    • 与Promise的关系
      • 一些面试题
  • 循环等待
  • 事件循环
  • 应用
    • vue中,一个Promise封装的接口请求,需要写成同步
    • 封装一个获取某ui库form组件里的数据的方法:
    • 并发请求一定数量的接口

前言

本文章只是个人对Promise和Async知道的一些知识点的记录。有些说内容引用了阮一峰老师的es6入门文档。需要更加详细了解的还请移步到阮一峰老师的es6入门文档。


异步写法出现的原因

之前在哪里看来的原因之一是单线程阻塞,其实错误的(面试的时候面试官帮我指出了)。没有异步写法的时候,也可以有定时器回调写法、普通函数回调写法、阿贾克斯请求等实现异步。

解决回调地狱

第二,解决过去ajax请求多次出现回调地狱的情况。

ajax1(() => {
  ajax2(() => {
    ajax3(() => {
      ajax4(() => {
        ajax5(() => {
          ajax6();
        })
      })
    })
  })
});

Promise对象

介绍

Promise 是异步编程的解决方案之一,它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,最终原生提供了Promise对象。

简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。不像其他监听函数,如果错过了,再去监听,是得不到结果的。
—《es6入门文档》

状态

Promise 有三种状态:

  1. 正在执行中 pending
  2. 执行成功 fulfilled
  3. 执行失败 rejected

名字缘由

Promise这个名字的由来,它的英语意思就是 “承诺” :

  1. 当前给不了结果,但承诺会在Promise内异步操作出结果后给你反馈。
  2. 只有Promise内异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
    —《es6入门文档》

可以说是个非常负责的人。


使用例子

function PromiseFn() { // 用函数封装,因为new Promise就直接执行了
    return new Promise((resolve, reject) => {
    // 这里就写异步操作
        setTimeout(()=>{
            console.log("图片加载成功");
            if (true) resolve("图片已经被添加了")
            else reject("图片没有被添加")
        },1000)
    });
}

参数

可以看到Promise里面提供的两个参数:

  • resolve函数,pending转成fulfilled做的事,即执行成功做的事;
  • reject函数,pending转成rejected做的事,即执行失败做的事;

注意:在写resolve()reject()的时候要注意触发条件,不要异步操作还没做完就触发了。例如例子中的if条件。

then回调

Promise状态确定后,有个then()回调,用来表述Promise执行结束后上面两个参数具体执行的事情。

即,第一个参数是执行成功后执行的resolve函数具体内容,第二个参数是执行失败后执行的reject函数具体执行内容(后面会用catch去代替它),例如:

function PromiseFn() { 
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            console.log("图片加载成功");
            if (true) resolve("图片已经被添加了")
            else reject("图片没有被添加")
        },1000)
    });
}

PromiseFn().then((res)=>{
    console.log(res);
}, (rej)=>{
 	console.log(rej);
})

// 其中 
resolve("图片已经被添加了") 
// 为
("图片已经被添加了")=>{
    console.log("图片已经被添加了");
}

reject("图片没有被添加")
// 为
("图片没有被添加")=>{
    console.log("图片没有被添加");
}

好,理解上面之后,我们看看直接写一个Promise函数是怎么样的:

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('1s后执行了')
        resolve('回调成功')
    }, 1000)
}).then((res) => {
    console.log(res)
})

前面说了只要状态确认了,就会执行then,所以我们还可以这样:

let resFn = Promise.resolve('1')
resFn.then((res) => {
    console.log(res);
})

let rejFn = Promise.reject('2')
rejFn.then(() => {
}, rej => {
    console.log(rej);
})

发现没, resolvereject很有可能是个静态方法。

then的补充

then中的res和rej回调会默认返回一个Promise,并且传入参数undefined

let obj = new Promise((resolve, reject) => {
    resolve('回调成功')
}).then((res) => {
    console.log(res)
})

setTimeout(() => { console.log(obj) }, 0) // Promise {: undefined}

所以如果在then后面再接一个then,那么后面这个then就会被调用:

PromiseFn()
.then(
  (res) => {
    console.log(res);
    // 会默认返回一个带参数为undefined的Promise
  },
  (rej) => {
    console.log(rej);
    // 会默认返回一个带参数为undefined的Promise
  }
)
.then(
  (res) => {
    console.log(res); // 上面的走res还是rej都会在这里接收到undefined
  },
  (rej) => {
    console.log(rej);
  }
);

那么可以在第一个then中返回一个Promise函数:

(res) => {
    console.log(res);
    return PromiseFn1()
}

那么就会正常在第二个then收到该Promise的返回值。

那如果第一个then中的走rej了,我们一般都不会让其继续走下一个then,可以这样写(这个可以不记):

PromiseFn()
.then(
  (res) => {
    console.log(res);
  },
  (rej) => {
    console.log(rej);
    return new Promise(()=>{}) // 失败就返回一个初始化状态的promise不让走下面的then
  }
)
.then(
  (res) => {
    console.log(res);
  },
  (rej) => {
    console.log(rej);
  }
);

还有一个是回调可以消参:

function fn(str) {
  console.log("打印---", str);
}

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("回调成功");
  }, 1000);
}).then((res) => { // 回调执行,传入参数
  fn(res);
});

// 回调可以把参数消掉,会自动带入
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("回调成功");
  }, 1000);
}).then(fn);

catch()

假如我们在Promise的回调中报错了,例如:

function PromiseFn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) resolve("执行resolve")
            else reject("执行reject")
        }, 1000)
    });
}
PromiseFn().then(
    (res) => {
        console.log(obj) // 打印一个不存在的东西
        console.log(res)
    },
    (rej) => {
        console.log(rej)
    }
)

那么打印台就会报错,此时可以用catch方法去捕获这个错误,而不报错:

PromiseFn().then(
    (res) => {
        console.log(obj) // 打印一个不存在的东西
        console.log(res)
    },
    (rej) => {
        console.log(rej)
    }
).catch((e) => {
    console.log('手动处理这个错误', e) // 这个e参数是不定的,只是大家约定俗成,他有name,message属性
})

然后,我们可以用catch去代替then的第二个函数的具体内容:

PromiseFn().then(
    (res) => {
        console.log(res)
    }
).catch((rej) => {
    console.log('既能捕获resolve的错误,又能代替执行reject', rej)
})

既能捕获resolve的错误,又能代替执行reject。 所以,以后都这样去执行一个Promise函数。

补充:在catch中和then是一样的,会默认返回一个入参为undefined的Promise,以下举例子:

// 1 promise直接走失败态,不抛出错误,p函数为成功态
const p = Promise.reject().catch(() => {
    console.error('catch some error')
})
p.then(res=>{console.log('走成功状态', res)}) // 此时p是个resolved的Promise

// 2 promise直接走失败态,抛出错误,p函数为失败态
const p = Promise.reject().catch(() => {
    throw new Error('err')
})
p.catch(err=>{console.log('走失败状态', err)}) // 此时p是个rejected的Promise

拓展: Promise.prototype.catch 方法是 .then(null, rejection) 或是
.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。

结合then的执行问题

从慕课那边的例子:

// 第一题
Promise.resolve().then(() => {
    console.log(1)
}).catch(() => {
    console.log(2)
}).then(() => {
    console.log(3)
})
// 1 3

// 第二题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).then(() => {
    console.log(3)
})
// 1 2 3

// 第三题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).catch(() => {
    console.log(3)
})
// 1 2

all()

可理解为并发执行多个Promise,使用例子:

let yibuFn = functions(n){
  return new Promise(.......)
}

Promise.all([yibuFn(1),yibuFn(2),yibuFn(3)]
.then((res) =>{ 
	// 全部成功后的回调
 }(rej)=>{ 
 	// 全部失败后的回调
 }
)

// 比较方便的写法是
let requests = [] // 用一个数组把所有的promise()请求一个一个的push进去
Promise.all(requests).then(values=>{
	values.forEach(res=>{
		... // 把结果循环出来使用
	})
})

重点:

  • all的入参数组要是Promise,并且是一个执行的状态
  • 全部返回的数据是数组的形式,且会按照请求的顺序排列好!

all()也有缺点,在ajax请求中,如果这个Promise队列里出现了reject,例如其中一个接口报错。那么Promise.all()返回的结果会被一个reject而报销(其他正常返回也没用了)。

如果想捕获rejected,也可以使用catch,蛋疼的是只能捕获到第一个转变为rejected的Promise,不能捕捉所有发生rejected转变的Promise。

看起来也是个静态方法。

手写类似原理

这个题目真挺不错的,考验了你对Promise的理解程度,还对编码能力有一定的小要求。

function promiseAll(item) {
    return new Promise(function (resolve, reject) {
        let res = [] // 存储成功函数返回的值
        let num = 0 // 记录都返回成功的数字
        let len = item.length // 数组的长度
        for (let i = 0; i < len; i++) {
            item[i].then(function (data) {
                res[i] = data
                if (++num === len) {
                    resolve(res)
                }
            }, reject)
        }
    })
}

验证

function p(msg, delay = 1000) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(msg)
        }, delay)
    })
}
let arr = [p('1'), p('2', 3000), p('3', 2000)]
promiseAll(arr).then(res => {
    console.log('promiseAll', res);
})

最终3s后打印[1, 2, 3]

这个手写题要注意的地方:

  • 用数组下标的方式写入结果,保证结果的顺序性
  • 用一个值类型计数,而不是让结果的数组长度与promise队列长度去比对,来决定是否全部完成。如果用后者去判断,会出现假设最后一个promise先完成,然后直接通过判断结束任务了。

race()

多个Promise执行,只回调第一个状态确定的:

Promise.race([p1, p2])  //这两个哪个先执行成功哪个就传入result
    .then((result)=>{
        console.log(result)
    })
    .catch((err)=>{
        console.log(err)
    })
}

应用:用all请求多个接口的过程中,当其中有个接口请求时间超过3s就不去管了,防止因为一个接口而拖累其他的接口:

function PromiseFn(delay) {
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) resolve("执行resolve")
            else reject("执行reject")
        }, delay)
    });
    return Promise.race([p, new Promise(resolve => {
        setTimeout(() => resolve(delay + 'timeout'), 2000)
    })])
}

Promise.all([PromiseFn(1000), PromiseFn(3000)]).then((res) => {
    console.log('res', res) // ['执行resolve', '3000timeout'] 
})

finally()

无论promsie执行成功还是失败,都会调用。

.then(function(){
  console.log('success');
}).catch(function(){
  console.log('catch');
}).finally(function(){
  console.log('finally'); 
});

应用:可以把取消ajax加载动画放在这里处理


Async/await

诞生原因

只是我的猜测,因为使用Promise的回调会默认返回Promise,如果需要连续触发异步,写起来就变成一个链式写法,代码量比较多(但已经比回调地狱好很多了hhh):

let promise = aPromise() // 必须要有一个变量接收要不报错
  .then(() => {
    return aPromise();
  })
  .then(() => {
    return "哦吼吼";
  })
  .then(() => {
    console.log("上一步还能直接返回变量", res);
    return aPromise();
  })
  .catch((err) => {
    console.log(err);
  });

链式调用本质也是回调函数,为了彻底的消灭回调的写法,出现了Async,用同步的写法代替异步。

并且写法上更加易读简洁。

Promise链式调用用现在眼光看可能比较落后,但是在当时可是解决了回调地狱的问题。

使用

只需记住两条:

  1. 在函数前加入async,声明这个函数内有异步操作;
  2. 在async内的异步操作前加await,意思就是后面的老哥是个Promise/async异步操作,要等他的状态确定了才能继续向下走;
async function fn(){
	...
	await // 一个promise/async函数
	...
}

讲讲这个await的细节

await执行顺序

async function fn(){
  同步A
  await B
  同步C
}

fn()

await后面的函数会直接执行,不是说执行完同步AC后再去执行,然后要等B完成后才去执行C,C就是微任务;

await后面跟一个Promise函数,并且会自动拿到resolvereject的参数,不需要用then去接参数,所以如果有参数,需要拿个常量来接收,例如const data = await B

例子:把异步执行变成同步

function promiseFn(){
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			console.log('异步执行完毕')
			resolve('芜湖')
		},2000)
	})
}

async function fn(){
	...
	const a = await promiseFn() 
	...
	const b = await promiseFn() 
	...
}

你看,这样写的代码没有链式调用,没有回调,全都是同步的写法,非常简洁易读。

await可以被try catch捕捉

async function fn () {
	try {
		cosnt p = await new Promise((resolve, reject)=>{
			setTimeout(()=>{
				reject(new Error('错误'))
			})
		})
	} catch(e) {
		console.log('error', e.message)
	}
}

当await里的Promise报错时,catch能捕捉到错误。完全不受调用栈的逻辑影响。

所以可以用在很多场景中比如:

async function fn () {
	try {
		await aPromiseFn(1)
		await aPromiseFn(2)
		await aPromiseFn(3)
	} catch(e) {
		return console.log(e.round) // 当某个抛出rejected状态时,就捕捉到,下面的代码也不执行了
	}
	...
}

// 如果想并行执行
async function fn () {
	try {
		await Promise.all([aPromiseFn(1), aPromiseFn(2), aPromiseFn(3)])
	} catch(e) {
		return console.log(e.round) // 当某个抛出rejected状态时,就捕捉到,下面的代码也不执行了
	}
	...
}

到现在,其实已经能够看出async/await写法很强大灵活,还能把异步的写法写出同步的样子,大大提升易读性。

与Promise的关系

第一:其实async标记的函数内部自动会返回一个Promise,状态根据函数内部抛出的东西决定。

console.log(async function() {
	return 4 // 此时打印的就是resolved状态的Promise
	// throw new Error(4) 此时打印的就是rejected状态的Promise 
	// 当然也可以手写返回一个Promise:return new Promise(() => {})
})

例子:

// 1
async function fn1() {
    return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)

// 2 所以async函数执行后可以加.then()
async function fn(){
	await // 一个promise/async函数
	if (true) {
		return a
	} else {
		throw new Error('出错了');
	}
}
fn().then((res)=>{
    // 这个res就是return出来的东西,注意这里不是Promise的类似用法,只用来接收参数
}, (rej)=>{
    // 捕获到的错误
})

第二:(代码来自慕课)

  • await 后面跟 Promise 对象:会阻断后续代码,等待状态变为 resolved ,才获取结果并继续执行
  • await 后续跟非 Promise 对象:会直接返回
(async function () {
    const p1 = new Promise(() => {}) // 已经执行了Promise状态已确认
    await p1 // 这里的Promise在上一步已经状态确认
    console.log('p1') // 不会执行
})()

(async function () {
    const p2 = Promise.resolve(100)
    const res = await p2 // 这里可以看做是Promise .then()的写法
    console.log(res) // 100
})()

(async function () {
    const res = await 100
    console.log(res) // 100
})()

(async function () {
    const p3 = Promise.reject('some err')
    const res = await p3 // 因为reject状态不会走.then()所以不会执行
    console.log(res) // 不会执行
})()
// 失败状态可以通过上面说的try catch语法来捕获
(async function () {
    const p4 = Promise.reject('some err')
    try {
        const res = await p4
        console.log(res)
    } catch (ex) {
        console.error(ex)
    }
})()

这里可以看看for of与await直接有什么知识点:【JS基础】流程控制,让逻辑产生分支

一些面试题

async function fn() {
    return 100
}

(async function () {
    const a = fn() // 获取到什么
    const b = await fn() // 获取到什么
    console.log(a)
    console.log(b)
})()

(async function () {
    const a = await 100
    console.log(a)
    const b = await Promise.resolve(200)
    console.log(b)
    const c = await Promise.reject(300)
    console.log(c)
})()

循环等待

可以看看:【JS基础】流程控制,让逻辑产生分支(选择语句、循环语句)里的for offor await of


事件循环

Promise和Async经常用来考事件循环的题目,可以参考我这篇文章:【JS基础】克服事件循环机制的基础面试题,一点也不难

这里要注意一个问题,很多新人会犯的错误,Promise本身是同步的,他的回调才是异步的,具体还是看我上面的文章。


应用

vue中,一个Promise封装的接口请求,需要写成同步

getSomething(){
    return ajax('get', '/user').then(res => { 
        return res
    })
},
async dataDeal(){
    // ...
    let res = await this.getSomething()
    // ...
}

封装一个获取某ui库form组件里的数据的方法:

// AsyncFn 这个方法就当做form校验api
function getData() {
    AsyncFn().then(
        (res) => {
            console.log(res)
            return res
        }
    ).catch((e) => {
        return e
        console.log(e)
    })
}
console.log('拿不到', getData()); // 这样是拿不到返回的res的,因为return的作用域在then函数里

// 改写
async function getData() {
    let data = await AsyncFn().then(
        (res) => {
            console.log(res)
            return res
        }
    ).catch((e) => {
        return e
        console.log(e)
    })
    return data // 返回一个promise
}

(async function fn() {
    console.log('拿到', await getData()); // 这样就可以拿到了
})()

并发请求一定数量的接口

这个是从掘金评论区看来的,写的很好:

// 模拟100个异步请求
const arr = [];
for (let i = 0; i < 100; i++) {
    arr.push(() => new Promise((resolve) => {
        setTimeout(() => {
            console.log('done', i);
            resolve();
        }, 100 * i);
    }));
};

const parallelRun = () => {
    const runingTask = new Map(); // 记录正在发送的异步请求(闭包存储)
    const inqueue = (totalTask, max) => { // 异步请求队列,每组请求的最大数量
        // 当正在请求的任务数量小于每组请求的最大数量,并且还有任务未发起时,就推入请求
        while (runingTask.size < max && totalTask.length) {
            const newTask = totalTask.shift(); // 弹出新任务
            const tempName = totalTask.length; // 以长度命名?
            runingTask.set(tempName, newTask);
            newTask().finally(() => {
                runingTask.delete(tempName);
                inqueue(totalTask, max); // 每次一个任务完成后就继续塞入新任务
            });
        }
    }
    return inqueue;
};

parallelRun()(arr, 6);

你可能感兴趣的:(#,es6入门,javascript,js)