广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >前端JavaScript之Promise
  • 257

0
分享到

前端JavaScript之Promise

2024-04-02 19:04:59 257人浏览 泡泡鱼
摘要

目录1、什么是Promise2、基本用法3、Promise的方法3.1 Promise.prototype.then()3.2 Promise.prototype.catch()3.

1、什么是Promise

Promise 是异步编程的一种解决方案。es6中已经提供了原生 Promise 对象。一个 Promise 对象会处于以下几种状态（fulfilled，rejected两种状态一旦确定后不会改变）：

  • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
  • 已兑现（fulfilled）: 意味着操作成功完成。
  • 已拒绝（rejected）: 意味着操作失败。

2、基本用法

Promise 对象是一个构造函数，用来创建 Promise 实例，它接收两个参数 resolve 和 reject 。

  • resolve 的作用是将 Promise 对象的状态从 pending 变为 fulfilled ，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
  • reject 的作用是将 Promise 对象的状态从 pending 变为 rejected ，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

const promise = new Promise(function(resolve, reject) {
  // ... 
  if (){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 实例生成以后，使用 then 方法分别指定 fulfilled 状态和 rejected 状态的回调函数。

  • then 接收两个参数，第一个是 Promise 对象的状态变为 fulfilled 时的回调函数，第二个是状态变为 rejected 时的回调函数。
  • catch 接收 Promise 对象的状态变为 rejected 时的回调函数。

promise.then(function (value){
 // ....
},function (err){
 // .... err
})
  
promise.then(function (value){
 // ....
}).catch(function (err){
    // ....
})

3、Promise的方法

3.1 Promise.prototype.then()

then 方法是定义在原型对象 Promise.prototype 上，前面说过，它接收两个可选参数，第一个参数是 fulfilled 状态的回调函数，第二个参数是 rejected 状态的回调函数。

then 方法返回的是一个新的 Promise 实例，方便我们采用链式写法。比如 then 后面接着写 then ，当第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。这种链式方式可以很方便的指定一组按照次序调用的回调函数。


loadData().then(function (value){
    return 3
}).then(function (num){
    console.log("ok", num) // 3
})

3.2 Promise.prototype.catch()

catch 方法是用于指定发生错误时的回调函数。如果异步操作抛出错误，状态就会变为 rejected ，就会调用 catch() 方法指定的回调函数，处理这个错误。


const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // 抛出错误状态变为 -> reject
});
const promise = new Promise(function(resolve, reject) {
  reject('unkonw error') // 使用reject()方法将状态变为 -> reject
});
promise.catch(function(error) {
  console.log(error);
});

Promise 对象的错误会一直向后传递，直到被捕获为止。比如下面代码： catch 会捕获 loadData 和两个 then 里面抛出的错误。


loadData().then(function(value) {
  return loadData(value);
}).then(function(users) {
 
}).catch(function(err) {
  // 处理前面三个Promise产生的错误
});

如果我们不设置 catch() ，当遇到错误时 Promise 不会将错误抛出外面，也就是不会影响外部代码执行。


const promise = new Promise(function(resolve, reject) {
   resolve(a) // ReferenceError: a is not defined
});
promise.then(function(value) {
  console.log('value is ', value)
});
setTimeout(() => { console.log('code is run') }, 1000); // code is run

3.3 Promise.prototype.finally()

finally() 方法不管 Promise 对象最后状态如何，都会执行的操作。下面是我们使用 Promise 的一个常规结构。


promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

3.4 Promise.all()

Promise.all() 方法可以将多个 Promise 实例包装成一个新的 Promise 实例返回。


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

新 promise 状态来依赖于“传入的 promise ”。

  • 只有当所有“传入的 promise ”状态都变成 fulfilled ，它的状态才会变成 fulfilled ，此时“传入的 promise ”返回值组成一个数组，传递给 promise 的回调函数。
  • 如果“传入的 promise ”之中有一个被 rejected ，新 promise 的状态就会变成 rejected ，此时第一个被 reject 的 promise 的返回值，会传递给 promise 的回调函数。

const promises = [1,2,3,4].map(function (id) {
  return loadData(id);
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(function(err){
  // ...
});

3.5 Promise.race()

Promise.race() 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.race() 方法的参数与 Promise.all() 方法一样。


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

Promise.all() 和 Promise.race() 对比：

Promise.all() ，如果所有都执行成功则返回所有成功的 promise 值，如果有失败则返回第一个失败的值。
Promise.race() ，返回第一个执行完成的 promise 值，它可能是fulfilled和rejected状态。
这两个方法的使用场景。

场景一：用户登录社交网站主页后，会同时异步请求拉取用户信息，关注列表，粉丝列表，我们需要保证所有数据请求成功再进行渲染页面，只要有一个数据不成功就会重定向页面，这里可以使用 Promise.all 。


function initUserHome() {
  Promise.all([
  new Promise(getMe),
  new Promise(getFollows),
  new Promise(getFans)
])  
    .then(function(data){
     // 显示页面
  })
    .catch(function(err){
    // .... 重定向页面
  });
};

initUserHome();

场景二：假如我们在做一个抢票软件，虽然请求了很多卖票渠道，每次只需返回第一个执行完成的 Promise ，这里可以使用 Promise.race 。


function getTicket() {
  Promise.race([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
     // 抢票成功
  })
    .catch(function(err){
    // .... 抢票失败，重试
  });
};

getTicket();

3.6 Promise.allSettled()

使用 Promise.all() 时，如果有一个 Promise 失败后，其它 Promise 不会停止执行。


const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

try {
  await Promise.all(requests);
  console.log('所有请求都成功。');
} catch {
  console.log('有一个请求失败，其他请求可能还没结束。');
}

有的时候，我们希望等到一组异步操作都结束了，再进行下一步操作。这时就需要使用 Promise.allSettled() ，的它参数是一个数组，数组的每个成员都是一个 Promise 对象，返回一个新的 Promise 对象。它只有等到参数数组的所有 Promise 对象都发生状态变更（不管是 fulfilled 还是 rejected ），返回的 Promise 对象才会发生状态变更。


const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

await Promise.allSettled(requests);
console.log('所有请求完成后（包括成功失败）执行');

3.7 Promise.any()

只要传入的 Promise 有一个变成 fulfilled 状态，新的 Promise 就会变成 fulfilled 状态；如果所有传入的 Promise 都变成 rejected 状态，新的 Promise 就会变成 rejected 状态。

Promise.any() 和 Promise.race() 差不多，区别在于 Promise.any() 不会因为某个 Promise 变成 rejected 状态而结束，必须等到所有参数 Promise 变成 rejected 状态才会结束。

回到 Promise.race() 多渠道抢票的场景，如果我们需要保证要么有一个渠道抢票成功，要么全部渠道都失败，使用 Promise.any() 就显得更合适。


function getTicket() {
  Promise.any([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
     // 有一个抢票成功
  })
    .catch(function(err){
    // .... 所有渠道都失败了
  });
};

getTicket();

3.8 Promise.resolve()

Promise.resolve() 方法将现有对象转换为 Promise 对象。等价于下面代码：


new Promise(resolve => resolve(1))

传入的参数不同，处理

  • 参数 Promise 实例，它将不做任何修改、原封不动地返回这个实例。
  • 参数 thenable 对象，它会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then() 方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(1);
  }
};
  • 参数是普通值，返回一个新的 Promise 对象，状态为 resolved 。

const promise = Promise.resolve(1);

promise.then(function (value) {
  console.log(value) // 1
});
  • 无参数，直接返回一个 resolved 状态的 Promise 对象。

3.9 Promise.reject()

Promise.reject(reason) 方法也会返回一个新的 Promise 实例，该实例的状态为 rejected 。


const promise = Promise.reject('unkonw error');
// 相当于
const promise = new Promise((resolve, reject) => reject('unkonw error'))

promise.then(null, function (s) {
  console.log(s)
});
// unkonw error

4、简单场景

异步加载图片：


function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
   const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = url;
  });
}

请求超时处理：


//请求
function request(){
    return new Promise(function(resolve, reject){
       // code ....
         resolve('request ok')
    })
}

function timeoutHandle(time){
   return new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('timeout');
        }, time);
    });
}

Promise.race([
    request(),
    timeoutHandle(5000)
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)// timeout
})

到此这篇关于前端javascript之Promise的文章就介绍到这了,更多相关JavaScript Promise内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 前端JavaScript之Promise

本文链接: https://www.lsjlt.com/news/155079.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 前端JavaScript之Promise
    目录1、什么是Promise2、基本用法3、Promise的方法3.1 Promise.prototype.then()3.2 Promise.prototype.catch()3....
    99+
    2022-11-12
  • web前端之JavaScript有什么用
    小编给大家分享一下web前端之JavaScript有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、JavaScript...
    99+
    2022-10-19
  • 前端常见面试题之async/await和promise的区别
    目录asyncasync函数定义作用async 函数中 return 值如何接受方式一方式二awaitawait定义作用关于await的注意点[[promiseValue]][pro...
    99+
    2022-11-13
  • 前端基础之CSS_2
    摘要 盒子模型 浮动 清除 溢出 定位 模态框 rgba 与 opacity透明区别  一、CCS盒子模型 margin：标签与标签之间的距离，主要用于控制标签周围间的间隔，从视觉上达到相互分开的目的。...
    99+
    2023-01-31
    基础
  • 前后端分离之VueJS前端的示例分析
    这篇文章给大家分享的是有关前后端分离之VueJS前端的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言前端用什么框架都可以，这里选择小巧的vuejs。要实现的功能很简单...
    99+
    2022-10-19
  • Vue之前端体系与前后端分离详解
    目录概述前端知识体系前端三要素表现层（CSS）行为层（JavaScript）JavaScript 框架 UI框架JavaScript 构建工具三端统一混合开发（Hybrid...
    99+
    2022-11-12
  • 前端进阶之教你利用javascript存储函数
    目录前言背景介绍实现方案思考js存储函数方案设计最后总结前言 任何一家Saas企业都需要有自己的低代码平台.在可视化低代码的前端研发过程中, 发现了很多有意思的技术需求, 在解决这些...
    99+
    2022-11-12
  • 详解前端安全之JavaScript防http劫持与XSS
    目录HTTP劫持、DNS劫持与XSSHTTP劫持DNS劫持XSS跨站脚本页面被嵌入 iframe 中，重定向 iframe使用白名单放行正常 iframe 嵌套更改 URL 参数绕过...
    99+
    2022-11-12
  • 好程序员web前端教程JavaScript系列之HTTP
    　　好程序员web前端教程JavaScript系列之HTTP：http 是我们前后台交互的时候的传输协议（即超文本传输协议）HTTP 的工作流程00001. 和服务器建立链接00002. 建立链接后，发送一个请...
    99+
    2023-06-03
  • Vue前端交互模式与Promise怎么使用
    这篇文章主要介绍“Vue前端交互模式与Promise怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue前端交互模式与Promise怎么使用”文章能帮助大家解决问题。Promise 概述Pr...
    99+
    2023-06-27
  • Web前端之iframe详解
    iframe是HTML中的一个标签，用于在页面中嵌入另一个网页或者其他类型的文档。它可以在一个页面中显示另一个页面的内容，类似于在一...
    99+
    2023-09-23
    Web前端
  • 前端技术之：常见的前端页面模板库
    VueJshttps://cn.vuejs.org/https://github.com/vuejs/vueReacthttps://reactjs.org/Handlebarshttp://handlebarsjs.com/https:/...
    99+
    2023-06-03
  • 前端 JavaScript运行原理
    目录1、什么是JavaScript引擎2、V8引擎3、运行时环境4、运行时的调用栈5、异步任务6、总结1、什么是JavaScript引擎 JavaScript引擎是一个计算机程序，它...
    99+
    2022-11-12
  • JavaScript是前端语言吗
    这篇文章主要介绍“JavaScript是前端语言吗”，在日常操作中，相信很多人在JavaScript是前端语言吗问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScri...
    99+
    2022-10-19
  • Javascript前端优化代码
    目录if 判断的优化1、最简单的方法：if 判断2、好一点的方法：Switch3、更优的方法: 策略模式includes 的优化for 循环数组去重1、最传统的方法：利用数组的ind...
    99+
    2022-11-12
  • 前端JavaScript中的class类
    目录1、类1.1 constructor()1.2 getter和setter1.3 this1.4 静态属性1.5 静态方法2、继承2.1 super关键字2.2 _proto_和...
    99+
    2022-11-12
  • 前端JavaScript大管家 package.json
    目录一、必须属性1. name2. version二、描述信息1. description2. keywords3. author4. contributors5. homepage...
    99+
    2022-11-12
  • 聊聊前端安全之CSRF
    本文作者为奇舞团前端开发工程师 一、什么是CSRF  CSRF（Cross Site Request Forgery，跨站域请求伪造），通常缩写为 CSRF。CSRF攻击是攻击者通过伪装成受信任用户向服务器发起各种请求，达到欺...
    99+
    2023-10-03
    前端 安全 csrf php javascript
  • javascript属于前端还是后端的
    小编给大家分享一下javascript属于前端还是后端的，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！javascript是前端。javascript是前端开发语...
    99+
    2023-06-14
  • Vue Element前端应用开发之前端API接口的封装
    目录1、ABP框架API接口的回顾2、基于ES6的JS业务类的封装1、ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称，ABP是一个开源且文档友好的应...
    99+
    2022-11-12
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作