promise-更加优雅的写异步代码

promise的基本形式

<script>
    let p = new Promise(function (resolve, reject) {
      
        // resolve("包包");// 调用resolve可以传递一个终值  成功的结果
        // reject("没钱"); //
    });
    console.log(p)
script>

promise如何得到终值，如何得到拒因？

<script>
    let p = new Promise(function (resolve, reject) {
      
        // resolve("包包"); // 处于等待的promise对象，转成成功状态
        reject("没钱"); // 处于等待的promise对象，转成失败状态
    });
    // console.log(p)
    p.then(value=> {
      
        console.log(value); // value就表示终值
    },reason=> {
      
        console.log(reason);
    })
script>

promise扩展

p2是一个新的Promise，如果上面不报错，p2是成功的状态，如果报错，则p2就是失败的，如果是成功态，终值是方法的返回结果

 let p1 = new Promise((resolve,reject)=>{
        resolve("包包")
    })
    // then是一个方法  是一个方法  就有一个返回值
    // then又返回一个新的promise  p2就是一个新的promise
    // p2默认也是处理等待状态
    let p2 = p1.then(value => {
        console.log(value)
    }, reason => {
        console.log(reason)
    } )

eg:

let p1 = new Promise((resolve,reject)=>{
        // 执行器  执行器通常放异步代码
        setTimeout(()=>{
            resolve("包包")
        },2000)
    })
   
    let p2 = p1.then(value => {
        
        console.log(value)
    },reason => {
        console.log(reason)
    })

   
    p2.then(value => {
        // p2成功就会走此函数   value代表终值
        console.log(value) // undefined
    },reason => {
        console.log(reason)
    })

第一个参数可以简写

let p = Promise.reject("没钱");  // 创建一个失败的promise
    /*p.then(value=>{
        console.log(value)
    },reason => {
        console.log(reason)
    }) */// 由于p直接就是一个成功的promise，then中的两个方法，只需要写第1个就OK了

    // 写个null表示没有此函数
    p.then(null,reason => {
        console.log(reason)
    })

返回值是一个新的Promise

let p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("包包")
        },2000)
    })
    // Promise.resolve(110); 直接创建出一个成功的Promsie
    // 2）如果p1.then中的方法中返回了一个新的promise，p2是成功还是失败，就要看这个新的promise是成功不是失败
    // Promise.resolve(110) 成功  ===> p2就是成功  终值是：110
    let p2 = p1.then(value => {  // p2就变成成功的promse
        console.log(value)
        return Promise.resolve(110);
    },reason => {
        console.log(reason)
    })
    p2.then(value => {
        console.log(value)  // 看上一个then中的方法的返回值  und
    },reason => {
        console.log(reason)
    })

返回Promise报错执行下一个then 的reject

注意NAN不是报错

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(10)
        },2000)
    }).then(value => {
        console.log(value) // 10
        return value * n; // 报错了，会走下一个then的第2个函数
    },reason => {
        console.log(reason)
        return Promise.reject(666);
    }).then(value => {
        console.log(value)
    },reason => {
        console.log(reason); // n is not defined
        return reason * 10; // return NaN  没有报错
    }).then(value => {
        console.log(value) // NaN
        return Promise.reject(value * 100)
    },reason => {
        console.log(reason)
    }).then(value=>{

    },reason => {
        console.log(reason)
    })

then顺延的使用

如果没有响应的值会到下一个then中找

let p1 = new Promise((resolve,reject)=>{
        resolve("包包")
    })
    /*p1.then(value => {
        console.log(value)
        return Promise.reject(4444)
    }).then(null,reason => {
        console.log(reason)
    })*/

then用来捕获成功的结果，catch用来捕获失败的结果

p1.then(value => {  // catch就是.then(null,reason=>{})的语法糖
        console.log(value)
        return Promise.reject(4444)
    }).catch(reason => {  // 在catch中捕获失败的结果
        console.log(reason)
    })

async 和await的使用

await后面要跟Promise，要和async函数对应返回的是成功的值

let p1 = new Promise((resolve,reject)=>{ // 执行器是立即执行
        // 执行器中放异步代码
        setTimeout(()=>{
            resolve("包包")
        },3000)
    })
    async function fn() {
        // await返回值是成功的结果
        let value = await p1; // await后面跟promise   要使用await  对应的函数必须是async函数
        console.log(value)
    }
    fn();

try…catch返回的是失败的值

async function fn() {
        // await返回值是成功的结果 失败的结果需要通过try catch来获取
        try{
            let value = await p1;
            console.log(value)
        }catch (reason) {  // 失败的结果，需要在catch中捕获
            console.log(reason)
        }
    }
    fn();