关于ES6"Promise"与ES7"async await"个人理解
前言
- 概述
Promise是ES6出的一种关于异步编程的一种解决方案，从语法上来说，Promise是一个对象，操作他可以将不可控的异步操作变成一定程度上的可控。
- Promise状态
Promise异步操作有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。除了异步操作的结果，其他任何操作都无法改变Promise的状态。
- Promise状态的缺点
无法取消Promise，一旦新建它就会立即执行，中途无法取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前到哪一个阶段（开始还是完成）
- Promise简单应用
const fn1 = function(){
setTimeout(()=>{
console.log(500)
},500)
}
const fn2 = function(){
setTimeout(()=>{
console.log(1000)
},1000)
}
fn2();
fn1()
console.log(111)
上面代码输出是 111 500 1000、及没有异步的先执行,然后执行异步函数、因为fn2延迟比fn1高 固先输出500 1000；
使用Promise
const fn1 = function(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(500)
resolve()
},500)
})
}
const fn2 = function(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(1000)
resolve()
},1000)
})
}
fn2().then(fn1).catch(res=>console.log(res))
console.log(111)
输出 111 1000 500总共等待1.5s 这个时候fn1会在1.5s后才执行及fn2执行完毕之后才执行fn1 若fn1和fn2中有一个方法执行失败就会执行.catch（）
- Promise的参数(resolve,reject)前者为异步调用成功的回调函数、后者为失败的回调函数
const fn3 = function(){
return new Promise((resolve,reject)=>{
uni.request({
url: 'http:...',
method: 'POST',
data: {
username: '用户名',
password: '密码',
},
success: (res) => {
resolve() //这里放成功返回
},
fail: (res) => {
reject() //失败返回
}
});
})
}
上面是模拟登录操作
const fn1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(111)
}, 1000);
})
}
const fn2 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(222)
}, 5000);
})
}
Promise.race([fn1(),fn2()]).then(res=>console.log(res)).catch(res=>console.log(res))
关于。race将返回方法集中最快返回的函数 此代码打印顺序:111 虽然fn2依然在执行但是执行结果会被舍弃Promise.race（）将只会返回返回结果最快的那一个无论对或者错
const fn1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(true){ resolve(111)}
else{reject(333)}
}, 1000);
})
}
const fn2 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(222)
}, 5000);
})
}
Promise.all([fn1(),fn2()]).then(res=>console.log(res)).catch(res=>console.log(res))
此代码打印结果为:[111,222]无论对或者错都会等待两个异步函数同时结束之后才返回
Promise搭配async await使用
- 有一种情况是我要等登录结果回来之后再进行之后的逻辑操作，当然Promise中的.then也能做到。这里要说的是es7的新操作async await
const fn2 = function(){
let name = '小明';
return new Promise((resolve,reject)=>{
setTimeout(()=>{
name = '小红';
console.log('fn2')
resolve(name)
},1000)
})
}
const fn5 =async function(){
let name = fn2();
console.log(name);
console.log('我先执行?');
}
fn5()
返回的是 Promise方法 我先执行 fn2
const fn2 = function(){
let name = '小明';
return new Promise((resolve,reject)=>{
setTimeout(()=>{
name = '小红';
console.log('fn2')
resolve(name)
},1000)
})
}
const fn5 =async function(){
let name =await fn2();
console.log(name);
console.log('我先执行?');
}
fn5()
在fn5中添加await之后输出结果 fn2 小红 我先执行
这样async和await的作用就一目了然了，也就是使用了async和await函数（搭配使用）会在遇到await的时候等待await后的方法执行完在往下走 等同于将异步变成同步。
PS：最近开始将工作中遇到的问题记录下来方便以后使用