promise
1.回调地狱
var sayhello = function (name, callback) {
setTimeout(function () {
console.log(name);
callback();
}, 1000);
}
sayhello("first", function () {
sayhello("second", function () {
sayhello("third", function () {
console.log("end");
});
});
});
//输出： first second third end
一般回调超过五层，人类就无法理解这个代码
回调地狱：回调套回调套回调套回调
2.promise 用法
function say(num){
return new Promise(function(resolve,reject){
if(num===1){
resolve()
}else{
reject()
}
})
}
say(1)
.then(()=>{console.log('success fn')},
()=>{console.log('fail fn')})
随机筛子函数
function fn(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let n = parseInt(Math.random()*6+1,10) // 1~6
resolve(n)
},3000)
})
}
fn()
.then(
(x)=>{console.log('筛子的点数:'+x)},
()=>{console.log('摇色子失败')})
async await (ES8)
- async 和 promise 有关，可以和promise结合在一起用
- async 会返回一个隐式的promise
- async 可以让异步代码更像同步代码
随机筛子函数
function fn(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let n = parseInt(Math.random()*6+1,10) // 1~6
resolve(n)
},3000)
})
}
async function test(){
let n = await fn()
console.log(n)
}
test() ** 3s之后随机打出一个1~6 数字
不使用 async和await 会打印出 undefined
try catch
function fn(isBig){
return new Promise((resolve,reject)=>{
console.log('开始掷骰子，请等待...')
setTimeout(()=>{
let n = parseInt(Math.random()*6+1,10)
if(n>3){
if(isBig==='大'){
resolve(n)
}else{
reject(n)
}
}else{
if(isBig==='小'){
resolve(n)
}else{
reject(n)
}
}
},1000)
})
}
async function test(){
try{
let n = await fn('大')
console.log('赌对了',n)
}catch(error){
console.log('赌错了',error)
}
}
test()
思考：为什么需要async await?
promise 格式优美还可以连环调用
fn('大').then(f1,f2).then(f3,f4)
因为更像是标准的同步函数
链式调用
先调用p函数，
.要么调用f1;要么调用f2
.f1,f2都没报错，都会执行f3
.f1或f2报错了，会执行f4
总结：
promise 完全不知道顺序，对大脑要求高
async await try catch 就两个分支，看起来比较明显
同时调用两个函数 Promise.all
发现await的局限性了，await只能接一个promise 不能接两个promise
1.promise 调用两个函数的办法
//接受一个数组，数组每个函数会返回一个promise
function fn(isBig){
return new Promise((resolve,reject)=>{
console.log('开始掷骰子，请等待...')
setTimeout(()=>{
let n = parseInt(Math.random()*6+1,10)
if(n>3){
if(isBig==='大'){
resolve(n)
}else{
console.log('error')
reject(n)
}
}else{
if(isBig==='小'){
resolve(n)
}else{
console.log('error')
reject(n)
}
}
},1000)
})
}
Promise.all([fn('大'),fn('大')])
.then((x)=>{console.log(x)},(y)=>{console.log(y)}) // 前面成功函数会在所有情况都成功的情况下才会执行；后面函数只要任何一个出错
2.await
async function test(){
try{
let n = await Promise.all([fn('大'),fn('大')])
console.log('赌对了',n)
}catch(error){
console.log('赌错了',error)
}
}
test()
Promise.race
Promise.race和Promise.all正好相反
Promise.all是两个都成功，才算成功
Promise.race两个只要有一个成功了，就算成功
感觉：await 像是promise 的语法糖，让promise更好用一点，更同步一点
async 就是为了标记函数，async function 实际是一个声明，声明函数是异步函数
function 也是一个声明，声明同步函数
