• ES6——Promise


    • 异步和同步

      • 异步,操作之间没有关系,同时执行多个操作, 代码复杂

      • 同步,同时只能做一件事,代码简单

    • Promise 对象

      • 用同步的方式来书写异步代码

      • Promise 让异步操作写起来,像在写同步操作的流程,不必一层层地嵌套回调函数

      • 改善了可读性,对于多层嵌套的回调函数很方便

      • 充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口

    • Promise 也是一个构造函数

      • 接受一个回调函数f1作为参数,f1里面是异步操作的代码

      • 返回的p1就是一个 Promise 实例

      • 所有异步任务都返回一个 Promise 实例

      • Promise 实例有一个then方法,用来指定下一步的回调函数

        let p1 = new Promise(function(resolve, reject){
            // 异步代码           resolve 成功了 reject  失败了
            // $.ajax()    执行异步 AJAX 请求
                $.ajax({
                    url: '10-arr.txt', //规定发送请求的 URL。默认是当前页面。
                    dataType:'json',//预期的服务器响应的数据类型。
                    success(arr){
                        resolve(arr);
                    },
                    error(err){
                        reject(err);
                    }
                })
            });
        
            p1.then(function(arr){
                console.log('成功了'+arr);
            },function(err){
                console.log('失败了'+err);
            });
        let p1 = new Promise(function(resolve, reject){
                $.ajax({
                    url: '10-arr.txt',
                    dataType:'json',
                    success(arr){
                        resolve(arr);
                    },
                    error(err){
                        reject(err);
                    }
                })
            });
            let p2 = new Promise(function(resolve, reject){
                $.ajax({
                    url: '10-arr1.txt',
                    dataType:'json',
                    success(arr){
                        resolve(arr);
                    },
                    error(err){
                        reject(err);
                    }
                })
            });
            Promise.all([
                p1,p2
            ]).then(function(arr){
                let [res1, res2] = arr;
                alert('全成功了');
                alert(res1);
                alert(res2);
            },function(){
                alert('至少有一个失败了');
            });
            // 失败!!!!!!!!!!!!!
        
        function createPromise(url){
                return new Promise(function(resolve, reject){
                    $.ajax({
                        url,
                        dataType:'json',
                        success(arr){
                            resolve(arr);
                        },
                        error(err){
                            reject(err);
                        }
                    })
                });    
            }
            Promise.all([
                createPromise('10-arr.txt'),
                createPromise('10-arr1.txt')
            ]).then(function(arr){
                let [res1, res2] = arr;
                alert('全成功了');
                alert(res1);
                alert(res2);
            },function(){
                alert('至少有一个失败了');
            });
            // 失败!!!!!!!!!!!!!
         Promise.all([
                $.ajax({url:'10-arr.txt',dataType:'json'}),
                $.ajax({url:'10-arr1.txt',dataType:'json'})
            ]).then(function(results){
                let [arr,json] = results;
                alert('成功了');
                console.log(arr.json);
            },function(){
                alert('失败了');
            });
        

          

  • 相关阅读:
    python:使用 watchdog 监控文件变化
    CSS 宽高度百分比加减像素的办法
    foxmail登陆失败LOGIN Login error user suspended
    IDEA 自动删除类中无用的import包
    CSS命名规范——BEM思想
    jQuery文件上传插件 uploadify 的使用
    textarea 固定大小,滚动条,限制拖动,文字对齐等
    命令行工具 Cmder 的使用与配置
    转:【MySQL】连接错误过多:is blocked because of many connection errors; unblock with 'mysqladmin flush-host
    OpenJFX的相关Maven依赖
  • 原文地址:https://www.cnblogs.com/sylys/p/11649048.html
Copyright © 2020-2023  润新知