zoukankan      html  css  js  c++  java
  • Promise

    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);
        })
     
     
     
  • 相关阅读:
    上帝永远不会问你的十件事
    discuz x1.5 showmessage函数和showDialog函数解析
    人生,没有那么简单…
    Proxy代理对象是如何调用invoke()方法的.
    实现简单的AOP前置后置增强
    浅谈设计模式visitor访问者模式
    了解jsp,这一篇就够了.
    jsp之el表达式jstl标签
    orale数据库.实例.表空间.用户.表
    题解 UVa10892
  • 原文地址:https://www.cnblogs.com/Lia-633/p/9844383.html
Copyright © 2011-2022 走看看