【ES6】Promise初探

最新推荐文章于 2025-03-11 11:28:52 发布

季诗筱

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量1.6k

点赞数

分类专栏： ES6

本文链接：https://blog.youkuaiyun.com/XIAOZHUXMEN/article/details/52163574

版权

ES6 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了ES6中的Promise概念，包括其基本用法、状态转换机制及其如何简化异步编程。文章通过实例展示了如何使用Promise处理AJAX请求，并概述了Promise提供的几种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期的学习计划就是 ES6+React，今天把Promise学了一下，现在先总结一下。

1、Promise的含义

所谓Promise，字面来讲就是“承诺”。在ES6里，它是一个对象，用来传递异步操作的消息。它代表某个未来才会知道结果的事件。Promise对象有以下两个特点：

对象的状态不受外界影响。Promise对象有3种状态，Pending(进行中)、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，这也就是“承诺”的意思，表示其他手段无法改变
状态一旦改变就不会再变。Primise对象的状态改变只有两种可能：从Pending变为Resolved和从Pending变为Rejected。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。Promise对象提供统一的接口，使得控制异步操作更加容易。

2、基本用法

var promise = new Promise(function(resolve,reject){
    // some code 
    if(/*异步操作成功*/){
        resolve(value);
    } else { 
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject：

resolve函数的作用是：将Promise对象的状态从“未完成”变为“成功”（即Pending->Resolve）。在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject函数的作用是：将Promise对象的状态从“未完成”变为“失败”（即Pending->Reject）。在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

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

promise.then(function(value){  
    //success
},function(value){ 
    //failure
});

then方法可以接受两个回调函数作为参数，第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Rejected时调用。第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数.

下面用Primise来实现Ajax：

var getJSON = function (url) {
    var promise = new Promise (function (resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = handler;
        xhr.open("GET",url);
        // xhr.responseType = 'json';
        // xhr.setRequestHeader("Accept","application/json");
        xhr.send();
        function handler () {
            if (this.readyState == 4) {
                if (this.status >= 200 && this.status < 300 || this.status == 304) {
                    resolve(this.responseText);
                } else {
                    reject(new Error (this.statusText));
                }
            }
        };;
    });
    return promise;
};

使用

getJSON("/data.json").then(function (json) {
    console.log("sucess:" + json);
},function (error) {
    console.log("error:" + error);
});

这里写图片描述

请求成功，返回success和json数据。

3、Promise的几个方法

then()：then方法是定义在Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。then方法返回的是一个新的Promise实例，因此可以采用链式写法，即then方法后面再调用另一个then方法。
Promise.prototype.catch()：该方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。
Promise.all( ):用于将多个Promise实例包装成一个新的Promise实例
Promise.resolve( ):用于将现有对象转为Promise对象。
done( ):总是处于回调链的尾端，保证抛出任何可能的错误
finally( ):用于指定不管Promise对象最后状态任何都会执行的操作