Promise的基本使用

biaoxiaoduan 发布于2019-08-22 14:54 / 495人阅读

摘要：执行完成接收一个函数作为参数，函数有两个参数，和分别表示异步操作执行后成功的回调函数和失败的回调函数。所以通常采用一个函数包含它执行完成可以使用异步操作中的数据执行完调用方法，就相当于我们之前写的回调函数。

基本概念

个人理解就是使用同步编程的写法完成异步编程操作。

const promise = new Promise((resolve, reject) => {
    //some asynchronous  code
    setTimeout(() => {
        console.log("执行完成");
        resolve("some data");
    }, 2000);
});

Promise 接收一个函数作为参数，函数有两个参数，resolve 和 reject 分别表示异步操作执行后成功的回调函数和失败的回调函数。

Promise 实例后马上执行。所以通常采用一个函数包含它

function runAsync() {
    return new Promise((resolve, reject) => {
        //some asynchronous  code
        setTimeout(() => {
            console.log("执行完成");
            resolve("some data");
        }, 2000);
    });
}
runAsync().then((data) => {
    console.log(data);//可以使用异步操作中的数据
})

runAsync() 执行完调用 then 方法，then() 就相当于我们之前写的回调函数。

resolve 和 reject

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject("out of range");
        }
    })
}
paramTest().then((number) => {
    console.log("resolved");
    console.log(number);
},(reason) => {
    console.log("rejected");
    console.log(reason);
})

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）

paramTest() 例子有两种情况：

当 number < 5 时，我们认为是成功情况，将状态从 pending 变为 fulfilled

当 number >= 5 时，我们认为是失败情况，将状态从 pending 变为 rejected

所以paramTest() 的执行结果：

fulfilled	rejected
resolved	rejected
number	out of range

catch的用法

我们继续调用 paramTest 方法举例

paramTest().then((number) => {
    console.log("resolved");
    console.log(number);
    console.log(data); //data为未定义
},(reason) => {
    console.log("rejected");
    console.log(reason);
}).catch((err) => {
    console.log(err);
})

catch 方法其实就是 .then(null, rejection) 的别名，也是用来处理失败失败的回调函数，但是还有一个作用：当 resolve 回调中如果出现错误了，不会堵塞，会执行 catch 中的回调。

all的用法

const p = Promise.all([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

all 方法接收一个数组参数，数组中每一项返回的都是 Promise 对象，只有当 p1, p2, p3 都执行完才会进入 then 回调。p1, p2, p3 返回的数据会以一个数组的形式传到 then 回调中。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p1");
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p2");
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//3秒后输出["p1", "p2"]

race的用法

const p = Promise.race([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

race 的用法与 all 如出一辙，不同的是 all 方法需要参数的每一项都返回成功了才会执行 then;而 race 则是只要参数中的某一项返回成功就执行 then 回调。

以下是 race 的例子，和 all 方法对比，可以看到返回值有很明显的区别。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p1");
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p2");
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 "p1"

点击这里查看本文中实例源代码

resloader是基于Promise实现的一个图片预加载并展示加载进度的插件，猛戳这里了解详情。如果感觉还可以的话，欢迎star

GPU云服务器云服务器 Promise使用数据库的基本使用 linux基本命令的使用实验一云服务器的基本使用

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

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

Promise之深入浅出

摘要：不兼容问题，本文不予以处理，出门左转，找谷哥。如果中的回调函数抛出一个错误，那么返回的将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。 Promise与async 主要内容： promise基本实现原理 promise 使用中难点（链式调用，API基本上返回都是一个新Promise，及参数传递） promise 对异常处理参考： 30分钟，让你彻底明...

littleGrow 2019-08-23 12:14 评论0 收藏0
异步发展流程 —— Promise 的基本使用

摘要：阅读原文简介是的新特性，提供了对异步编程控制的新的解决方案，在过去书写异步代码时要靠回调函数，当异步操作依赖于其他异步操作的返回值时，会出现一种现象，被程序员们称为回调地狱，即多层回调函数嵌套，这种代码的可读性维护性都很差，因此诞生了，当然 showImg(https://segmentfault.com/img/remote/1460000018998462); 阅读原文 Pro...

venmos 2019-08-23 12:18 评论0 收藏0
Promise入门之基本用法

摘要：入门之基本用法背景在我们使用异步函数比如进行编写代码，如果我们需要很多个请求不同的接口，而下一个接口需要依赖上一个接口的返回值，这样，我们的代码则需要在各种回调函数中嵌套，这样一层一层地下去，就形成了回调地狱。 Promise入门之基本用法背景在我们使用异步函数比如ajax进行编写代码，如果我们需要很多个ajax请求不同的接口，而下一个接口需要依赖上一个接口的返回值，这样，我们的代...

siberiawolf 2019-08-23 16:30 评论0 收藏0
Promise学习:基础入门

摘要：今天来学习下吧其实这在笔试上也是一个考点基本介绍对象是熟悉的名字吧工作组提出的规范原本只是社区提出的构想一些外部函数库率先实现了该功能中将其写入了语言标准目的为异步操作提供统一接口是啥它就是一个中一个对象起着代理作用充当异步操作与回调函今天来学习下Promise吧,其实这在笔试上也是一个考点. 基本介绍 Promise对象是CommonJS(熟悉的名字吧- -)工作组提出的规范.Pr...

iamyoung001 2019-08-21 14:27 评论0 收藏0
Promise 基本原理 & 异步

摘要：追加在本轮循环的异步任务追加在次轮循环的异步任务规定，和的回调函数，追加在本轮循环，即同步任务一旦执行完成，就开始执行它们。 author: 陈家宾 email: 617822642@qq.com date: 2018/2/23 Promise 基本实现 var PENDING = 0; var FULFILLED = 1; var REJECTED = 2; function Pr...

mtunique 2019-08-26 11:47 评论0 收藏0