ES6精解：promise用法

enali 发布于2019-08-22 18:10 / 3344人阅读

前言

今天就简单总结一下promise的用法，在用promise之前，我们要先了解一下什么promise，这个东西是用来干什么的？

通俗易懂的讲，promise其实就是一个构造函数，是用来解决异步操作的，我们平时其实还是会用到挺多的，比如我们经常会嵌套一层层的函数

step1(function (value1) {

  step2(value1, function(value2){

    step3(value2,function(value3) {

      step4(value3,function(value4) {

        // ...

      });

    });

  });

});

传统方法我们会这样写，但是如果用promise就会简单很多，如下：

(new Promise(step1))

  .then(step2)

  .then(step3)

  .then(step4);

基本用法

   new Promise(function (resolve,reject) {
        console.log("promise准备阶段");
        
        resolve("成功！");
        reject("失败！");
    })

输出结果：

promise准备阶段

注意： promise总共有三个状态，准备状态，成功状态，失败状态，这里面promise是刚刚定义，所以是进入准备状态，因为每new一个promise都会进入准备状态，我们还没有运行就进入准备状态了，所以，我们经常用一个函数给他包起来

  function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise准备阶段");
            resolve("成功！");
            reject("失败！");
        });
    }
    asyncPro();

输出结果：

promise准备阶段

这里，只有调用asyncPro()，promise才开始new一个

上面，大家应该也注意到了在构建promise时，有两个参数，resolve和reject，接下来我们重点讲下这两个

1. resolve讲解

resolve其实就是异步操作成功时候执行的函数，当我们创建一个构造函数之后，成功执行之后，我们传递的参数要如何获取呢？

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise准备阶段");
            resolve("成功！");
            reject("失败！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    });

输出结果：

promise准备阶段
成功！

注意： .then就是获取成功时候获取的数据

2. reject讲解

上面resolve是成功的时候回调，那么reject就是失败之后的回调

   function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise准备阶段");
            resolve("成功！");
            reject("失败！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    }).catch(function (msg) {
        console.log(msg);
    });

这个一般只有在操作异常的时候才会回调，.catch就是reject的回调，一般我们可以不写

好了，上面主要简单了解一下promise，接下来用一个例子来总结一下

  function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+"：promise准备阶段");
            resolve(msg+"成功！");
            reject(msg+"失败！");
        });
    }
    asyncPro("第一步").then(function (msg) {
        console.log(msg);
        return asyncPro("第二步");
    }).then(function (msg) {
        console.log(msg);
        return asyncPro("第三步");
    }).then(function(msg){
        console.log(msg);
    });

输出结果：

第一步：promise准备阶段
第一步成功！
第二步：promise准备阶段
第二步成功！
第三步：promise准备阶段
第三步成功！

从上面代码可以看出，promise对多层嵌套时有很大的帮助，可以对代码很好的维护，当第一步执行完毕，要执行第二步的时候，return出第二步的函数，在下一个then中获取返回的数据，以此类推。

以上是对promise用法简单总结，后续会再补充。

云服务器 GPU云服务器 es6中的promise promise用法精解 python算法精解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95568.html

ES6精解：箭头函数

摘要：基本用法在中允许使用来定义函数，如下就等同于从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则可以省略不写无参数情况若箭头函数不需要参数，则左侧用代替，如下无参数情况无参数基本用法在ES6中允许使用 => 来定义函数，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 评论0 收藏0
ES6精解：let、const、块级作用域

摘要：命令新增了命令，跟类似，都是用来声明变量的不允许重复声明报错不存在变量提升报错正确写法为既要先定义，后面才能有这个值，否则会报错，如果改成会提示未定义，但是就直接报错了暂时性死区只要在块级作用域里面存在则它所声明的变量就绑定在这个块级作用域 let命令 ES6新增了let命令，跟var类似，都是用来声明变量的 1.不允许重复声明 { let a = 1; let a =...

BWrong 2019-08-22 18:20 评论0 收藏0
ES6精解：变量的解构赋值

摘要：真正被赋值的是后者，而不是前者。第一行语句中，模式是取数组的第一个成员，跟圆括号无关第二行语句中，模式是，而不是第三行语句与第一行语句的性质一致。本文参考链接主要是看了阮一峰老师的文章，自己整理了一下，供后期自己看笔记用的 1.数组的解构赋值我们知道以前我们给一个变量赋值要这样如下： let a = 1; let b = 2; let c = 3; 但是ES6出来之后，我们可以这样：...

neu 2019-08-23 14:09 评论0 收藏0
JavaScript 编程精解中文第三版十一、异步编程

摘要：回调异步编程的一种方法是使执行慢动作的函数接受额外的参数，即回调函数。执行异步工作的函数通常会在完成工作之前返回，安排回调函数在完成时调用。它注册了一个回调函数，当解析并产生一个值时被调用。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Asynchronous Programming 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌...

GeekQiaQia 2019-08-23 18:20 评论0 收藏0
JavaScript 编程精解中文第三版二十、Node.js

摘要：在这样的程序中，异步编程通常是有帮助的。最初是为了使异步编程简单方便而设计的。在年设计时，人们已经在浏览器中进行基于回调的编程，所以该语言的社区用于异步编程风格。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Node.js 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了《JavaScript 编程精解（第 2 版）...

qqlcbb 2019-08-23 18:20 评论0 收藏0