• ES6学习笔记之promise


    首先要来认识,什么是promise

    官方:所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

    听起来云里雾里,我们还是先来认识下同步是什么吧。

    同步就是一次只能执行一个任务,包括函数调用以后,执行结束,返回执行结果才能进行下一个任务。假如这个任务执行时间很长,例如死循环,那就一直没法结束这个执行,那就要等好久好久好久或者永久,这就是线程阻塞。

    所以为了避免阻塞,就需要异步。

    异步就是同时执行多个任务,函数回调后不会立即返回执行结果,如果A任务需要等待,那就先执行B,等到A执行完了就继续执行A,特别是在层层嵌套请求的时候,单用ajax的话就要一直嵌套,会变得很复杂,如果我们使用promise,就可以结合then来改写,那代码就会变得非常简洁易懂。

    改写之前:

    request('test1.html', '', function(data1) {
        console.log('第一次请求成功, 这是返回的数据:', data1);
        request('test2.html', data1, function (data2) {
            console.log('第二次请求成功, 这是返回的数据:', data2);
            request('test3.html', data2, function (data3) {
                console.log('第三次请求成功, 这是返回的数据:', data3);
                //request... 继续请求
            }, function(error3) {
                console.log('第三次请求失败, 这是失败信息:', error3);
            });
        }, function(error2) {
            console.log('第二次请求失败, 这是失败信息:', error2);
        });
    }, function(error1) {
        console.log('第一次请求失败, 这是失败信息:', error1);
    });

    改写以后:
    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次请求成功, 这是返回的数据:', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次请求成功, 这是返回的数据:', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次请求成功, 这是返回的数据:', data3);
    }).catch(function(error) {
        //用catch捕捉前面的错误
        console.log('sorry, 请求失败了, 这是失败信息:', error);
    });

    注意:Promise一旦新建就会「立即执行」,无法取消。这也是它的缺点之一。

    再举个简单的栗子:
    let a = 1;
    let p1 = new promise(function(resolve,reject){
      if(a == 1){
        resolve("成功啦!");
      }else{
        reject("失败啦!");
      }
    })

    p1.then(res=>{
      console.log(res);
    },err=>{
      console.log(err);
    })






     
  • 相关阅读:
    git branch查看不到分支的名字解决办法
    input输入框如何只能输入非零开头的正整数
    如何修改git分支名名称
    JavaScript如何把字符串中每个单词首字母转化为大写
    JavaScript原型链的理解
    JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈
    Vue中父子组件执行的先后顺序探讨
    我是不是该回来写点东西
    转载:引用 struts2标签详解
    mysql的重装问题......我自己的心得
  • 原文地址:https://www.cnblogs.com/hongyafang/p/12421221.html
Copyright © 2020-2023  润新知