javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS中Promise用法

JavaScript中的Promise用法大全(非常详细!)

作者：M博士

Promise是JavaScript中的一种对象,用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果,下面这篇文章主要给大家介绍了关于JavaScript中Promise用法的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下

一、相关概念介绍

1.什么是Promise

在JavaScript中，Promise是一个用于进行异步编程的构造函数。它是ES6中引入的一个重要概念，用于处理异步操作。Promise是JavaScript中用于处理异步操作的对象，它代表了一个尚未完成但最终会完成或失败的操作。Promise的目的是以更优雅的方式书写复杂的异步任务，从而提高代码的可读性和可维护性。

2.Promise状态

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。

3.创建Promise

通过构造函数创建一个Promise对象，构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject。resolve函数的作用是将Promise对象的状态从Pending变为Resolved，在then方法中传入的回调函数会被调用。reject函数的作用是将Promise对象的状态从Pending变为Rejected，在catch方法中传入的回调函数会被调用。

4.then()方法

5.catch方法

Promise对象的catch方法用于捕获链中的任何一步的错误。

6.链式调用

7.异步编程

在JS中，Promise是一个代表了异步操作最终完成或失败，及其结果值的对象。它允许开发人员为异步操作的成功和失败情况注册处理程序，极大地简化了异步编程的复杂性。

二、使用

1.构造Promise

new Promise(function(resolve,rejecrt)
{
    //异步操作
    //.......
    //操作成功
    resolve("success");
}).then(value=>{
    console.log(value);
});

Promise构造函数接受一个函数类型的参数executor，我们称executor为执行器函数。

2.executor 函数

3.then() 方法

const p1= new Promise(function(resolve,rejecrt)
{
    setTimeout(() => {
        var currentSecond = new Date().getSeconds();
        //获取当前时间的秒数，若为偶数则操作成功，否则为操作失败
        if(currentSecond%2===0)
        {
            //操作成功
            resolve(currentSecond);//p1的状态转变成fulfilled
            console.log(p1);
        }
        else
        {
            rejecrt(new Error(currentSecond));//操作失败，p1的状态转变成rejected
            console.log(p1);
        }
    }, 1000);

})
p1.then(value=>{
        console.log("success: "+value);//处理操作成功的情况
    })
.catch(error=>{
    console.error(error);//处理失败的情况
});

由运行结果可知：

4.then() 方法返回的Promise的状态

下面的3段代码将讨论：根据回调函数返回值的不同类型，确定then() 方法返回的Promise对象的状态值。
第1种情况：promise操作成功，回调函数返回非Promise对象

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//接受promise成功的回调
        return '345678'
    },reason=>{})
console.log(p1);

第二种情况：promise操作失败，回调函数返回非Promise对象

const promise= new Promise(function(resolve,rejecrt)
{
    //失败成功
    rejecrt('fail');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{},reason=>{
        return '123456'
    })
console.log(p1);

promise回调函数抛出异常

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//在回调函数中抛出异常
        throw '出错了'
    },reason=>{})
console.log(p1);

promise回调函数返回Promise对象

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{
        //回调函数返回Promise对象
        return new Promise((resolve,rejecrt)=>{
            resolve('成功了');
        })
    },reason=>{})
console.log(p1);

根据上面的四种情况，我们可以得出结论如下：

三、Async/Await语法糖

‌Async/Await是基于Promise的语法糖‌，使得异步代码的编写更加简洁和易于理解。使用async关键字声明异步函数，await关键字用于在函数中等待Promise的解析。await只能在async函数内部使用。

async function asyncFunction() {
  console.log("程序开始");
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("两秒后，耗时的任务操作成功");
    }, 2000);
  });
  const result = await promise; // 等待promise解析
  console.log(result); // 输出: Resolved
}

console.log(asyncFunction()); // 调用异步函数
console.log('程序结束')

四、Promise应用场景

五、总结

Promise 是一种用于处理异步操作的 JavaScript 对象，它提供了一种更清晰、更可靠的方式来管理异步代码。以下是 Promise 的主要特点和优势的总结：

到此这篇关于JavaScript中Promise用法大全的文章就介绍到这了,更多相关JS中Promise用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文