Promise

Posted 2021-01-14 lia-633

Promise用来解决异步嵌套问题

Promise是JS内置的构造函数  参数是一个回调函数 回调函数有两个参数：resolve(表示执行成功的回调) reject(表示执行失败的回调)

then方法:Promise类原型上的方法 
then有两个参数 第一个是成功回调resolve 第二个参数表示失败的回调reject 

promise有三种状态 第一种是pending（等待状态） 
                第二种是fulfilled(成功的状态) 
                第三种是rejected(失败的状态)

    let p = new Promise(function (resolve,reject) {
        window.setTimeout(function () {
//            resolve(‘success‘);  执行成功的回调
            reject();//失败的回调
        }, 1000)
    })
    p.then(function (data) {
        alert(data);
    },function () {
        alert(‘error‘);
    })

then方法的返回值 Promise类的实例，所以可以继续调用then方法

    let p = new Promise(function (resolve,reject) {
        window.setTimeout(function () {
            resolve(‘success‘);  //执行成功的回调
//            reject();//失败的回调
        }, 1000)
    });
    p.then(function (data) {
        alert(data);
//        return data;//return是个数值，则会把return的值做为参数传给下一个then的成功回调函数
        return new Promise(function (resolve,reject) {//return是个promise对象下个then走哪个回调函数 是由promise的状态决定的
            window.setTimeout(function () {
//                reject(‘失败‘);
                resolve(‘成功‘);
            },1000)
        })
    },function () {
//        alert(‘error1‘);
        throw new Error(‘error1‘);//手动抛出异常才会运行第二个then的失败回调 否则都是成功的回调
    }).then(function (data) {
        alert(data)
    },function (data) {
        alert(data)
    })

格式化提交的json数据

https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list
https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info
https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add 

postman：调试接口

 

处理异步并发的问题 ：

 

Promise.all异步并发问题 异步逻辑都处理完后再做其他事情

    /*Promise.all异步并发问题 异步逻辑都处理完后再做其他事情*/
    let p1 = new Promise(function (resolve,reject) {
        $.ajax({
            url: ‘https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info‘,
            type: ‘get‘,
            dataType: ‘json‘,
            success: resolve,
            error: reject
        })
    });
    let p2 = new Promise(function (resolve,reject) {
        $.ajax({
            url: ‘https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list‘,
            type: ‘get‘,
            dataType: ‘json‘,
            success: resolve,
            error: reject
        })
    });
    Promise.all([p1, p2]).then(function (res) {
        let [info,list] = res;
        console.log(info, list);
    })

Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果

  /*Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果*/
    let p1 = new Promise(function (resolve,reject) {
        $.ajax({
            url: ‘https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info‘,
            type: ‘get‘,
            dataType: ‘json‘,
            success: resolve,
            error: reject
        })
    });
    let p2 = new Promise(function (resolve,reject) {
        $.ajax({
            url: ‘https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list‘,
            type: ‘get‘,
            dataType: ‘json‘,
            success: resolve,
            error: reject
        })
    });
    //先返回的状态决定是成功状态还是失败状态
    Promise.race([p1, p2]).then(function (res) {
        console.log(res);//先返回的异步的结果
    },function (err) {
        console.log(err);
    })