拓展-9【Promise全解析】

(1).基本认知

1.基本形式

promise中有三个状态分别是 实现承诺-resolve 拒绝承诺-reject 承诺等待-pending

promise是解决异步流程化的一种手段

let promise = new Promise((resolve,reject)=>{
    //resolve('承诺实现')
    reject('承诺石城大海')
})
promise.then((res)=>{
    console.log(res)
},(err)=>{
    console.log(err)
})

2.then的异步证明

then是异步调用的，promise是同步的和then与promise没什么关系

let promise = new Promise((resolve,reject) => {
    resolve('承诺实现');
   // reject('承诺结束')
})
promise.then((res)=>{
    log('then')
})
console.log('global')
先打印global 再打印then

3.三个状态

resolve  reject  pending

pending => resolved

pending => rejected

resolved 和 rejected这两个状态不能互相转换

4.then返回promise

promise.then((res)=>{
    return new Promise((resolve,reject) => resolve('成功'))
}).then((res)=>{
    console.log(res)
}) 打印成功

5.catch和then第二个参数的问题

通过catch拿到reject,如果then里有第二个参数则catch失效

let promise = new Promise((resolve,reject)=>{
    reject('承诺没了')
})
promise.then((res)=>{
    
},(err)=>{
    console.log('then',err)
}).catch(err => {
    console.log('catch',err)
})
打印then 承诺没了

6.then的穿透

如果第一个then没处理可以穿透到第二个then中

let promise = new Promise((resolve,reject)=>{
    reject('承诺石沉大海')
})
promise.then((res)=>{
    console.log(1)
}).then(()=>{
},(err)=>{
    console.log('then',err)
}).catch(err=>{
    console.log('catch',err)
})
打印then 承诺石沉大海

7.直接抛出错误then中捕获

直接抛出错误，也可以在then中被捕获

let promise = new Promise((resolve,reject)=>{
    throw new Error('Error:承诺石沉大海')
})
promise.then((res)=>{
    console.log(1)
}).then(()=>{}).then(()=>{},(err)=>{
    console.log('then',err)
})
可以在第二个参数中捕获到

(2).回调问题

如果通过Node来访问文件内容就会和下面截图一样一直嵌套形成回调地狱的问题

(3).promise解决回调地狱

readFile这个函数为封装好的文件调取Promise函数
readFile('./data/user.json')
    .then((res)=>{
        const {resData} = res,
              userInfo = resData.filter(item => item.id === 1)
        return readFile('./data/userCourse.json',userInfo)      
    })
    .then((res)=>{
        const {prevData,resData} = res,
              userId = prevData.id,
              userCourse = resData.filter(item => item.id = userId)
        return readFile('./data/course.json',{
            username: prevData.username,
            userCourse
        })      
    })

     

(4).promise.all

1.基础认识

promise.all则为执行所有参数中的promise 最后将结果返回出去，然后通过then获取

用多个异步任务并发运行，他的结果创建之后使用，等待所有任务结果的完成

Promise.all([
    readFile('./data/user.json'),
    readFile('./data/userCour.json'),
    readFile('./data/course.json')
])
.then((res)=>{
    console.log(res)
})
[
    [{xxxx},{xxx}],
    [{xxxx},{xxx}]
]

2.iterable中不传入promise

Promise.all([
    0,'123',true
]).then((res)=>{
    console.log(res)
})[0,'123',true]

iterable内部元素传递的是Promise对象集合,如果不是promise,直接resolve

3.iterable中什么都不传

iterable内部没有元素，则输出空数组

Promise.all([]).then((res)=>{
    console.log(res)
})
[]

4.其中一个promise的状态是reject

有一个promise是rejected 则整个实例返回rejected

Promise.all([
    readFile('./data/user.json'),
    readFile('./data/userCourse.json',true),//这里返回true则会处理的直接返回reject
    readFile('./data/course.json'),
])
.then((res)=>{
    console.log(res)
},()=>{
    console.log(res)
})

//输出reject信息

5.Promise.reject

Promise.resolve/reject，就是个语法糖，相当于返回了一个新的promise

readFile('./data/user.json').then((res)=>{
    console.log(res);
    return Promise.reject('失败了');
    //return new Promise((resolve,reject)=>{resolve('成功了！！')})
})

(5).promise.race()

1.基础认识

返回响应最快的promise

无论成功失败，谁先完成就返回那个promise的结果，无论是fullfilled还是rejected

可以测试资源或者接口响应速度

Promise.race([
    readFile('./data/user.json'),
    readFile('./data/userCourse.json'),
    readFile('./data/course.json')
])
.then((res)=>{
    console.log(res);
})
[{id:1,name:'JavaScript'}]

2.图片加载时间测试

function getImg(){
    return new Promise((resolve,reject)=>{
        const oImg = new Image();
        oImg.onload = function(){
            resolve(oImg);
        }
        oImg.src="图片地址"
    })
}
function timeout(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('图片请求超时')
        },300)
    })
}
Promise.race([
    getImg(),
    timeout()
])
.then((res)=>{
    console.log(res);
})
.catch((err)=>{
    console.log(err)
})

这时候 有时候成功有时候失败，还可以用来测试接口

(6).async await

1.基础示例

const fetch = require('node-fetch');
function getData(){
    return new Promise((resolve,reject)=>{
        //返回的是promise所以这里可以直接返回
        fetch('xxx')
            .then((res)=>{
                retrun res.json()
            })
            .then((res)=>{
                resolve(res)
            })
            .catch((err)=>{
                reject(err)
            })
    })
}
getData().then((res)=>{
    console.log(res)
})

2.逃离回调函数方式

async function logData(){
    const data = await getData();
    console.log(data);
}
logData();//就会打印和上方一致数据

3.总结

await是一个操作符

等待一个promise对象产出结果的操作手段

功能是暂停async函数的执行，等待Promise处理后的结果

4.加入promise处理结果返回的是reject

假如promise处理的结果是rejected，则会直接抛出异常

const fetch = require('node-fetch');
function getData(){
    return new Promise((resolve,reject)=>{
        reject('失败了')
    })
}
async function logData(){
    const data = await getData();
    console.log(data);
}
logData();//这里直接抛出异常

5.async返回值

async函数是通过一个隐式的Promise返回pending

6.async函数也是异步的

async的意思是当前这个异步函数与同一作用域下的程序是异步的

async function logData(){
    const data = await getData();
    console.log(data)
}
logData()
console.log('Global')//会先打印global

7.与then的区别

无法完成中间状态的监听，因为直接就出结果了，而then可以再传递到下一个then中，从而有更多的操作空间