前端 js 经典:Promise

简介: 前端 js 经典:Promise

1. 什么是 Promise

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,它是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。

2. Promise 的用途

为了解决回调地狱问题

3. Promise 的用法

// 构造函数接收了一个函数作为参数,该函数就是Promise构造函数的回调函数。
// 该函数中有两个参数resolve和reject,这两个参数也分别是两个函数!
new Promise(function (resolve, reject) {
  // resolve 表示成功的回调
  // reject 表示失败的回调
})
  .then(function (res) {
    // 成功的函数
  })
  .catch(function (err) {
    // 失败的函数
  });
 
// or
let demo = new Promise((resolve, reject) => {
  let number = 10;
  setTimeout(() => {
    if (number >= 10) {
      resolve(number);
    } else {
      reject(1);
    }
  }, 1000);
});
demo
  .then((res) => {
    console.log("成功", res);
  })
  .catch((err) => {
    console.log("失败", err);
  });
 
// Promise.all() 接受多个promise的实例做为参数,参数必须是一个数组。
// promise都执行成功后,返回的是执行后的结果的一个数组,如果有一个失败了,返回的是第一个失败的返回值
let pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("pro1 success");
  }, 1000);
});
let pro2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("pro2 success");
  }, 2000);
});
let pro3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("pro3 faild");
  }, 1000);
});
Promise.all([pro1, pro2]).then((res) => {
  console.log(res);
}); //  ['pro1 success', 'pro2 success']
Promise.all([pro1, pro3, pro2])
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("faild", err);
  }); // faild pro3 faild
 
// Promise.race( ) 接受多个promise的实例做为参数,参数必须是一个数组。
// 其中一个promise完成时执行,返回结果是第一个完成的promise的返回数据
Promise.race([pro2, pro1]).then(res => {
    console.log(res)
}) // pro2 success


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
29天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
45 5
|
29天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
73 1
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
38 4
|
1月前
|
前端开发 JavaScript Java
一文带你了解和使用js中的Promise
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。如果我的文章对你有帮助,请关注我,将持续更新更多优质内容!🎉🎉🎉
21 0
一文带你了解和使用js中的Promise
|
7月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
70 1
|
7月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
106 4
|
7月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。