promise详解以及示例代码

最新推荐文章于 2024-09-21 16:49:57 发布

晟沚

最新推荐文章于 2024-09-21 16:49:57 发布

阅读量899

点赞数 1

分类专栏： web前端 js 文章标签： javascript promise 代码

本文链接：https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/76690625

版权

web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

首先讲解什么是promise
博主之前面试一直被问promise是什么，但是始终就是讲不清楚，现在博主决定写一篇文章加深记忆。

promise是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口，使得程序具备正常的同步运行的流程，回调函数不必再一层层嵌套。

三个状态

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）

状态变化法则

异步操作成功，Promise对象传回一个值，状态变为resolved。
异步操作失败，Promise对象抛出一个错误，状态变为rejected。

then 方法

then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就调用相应的回调函数。

resolve reject

resolve***函数*的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；触发then的第一个function
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。触发then的第二个function
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise应用实例－－ajax请求
传统方式下代码如下：

    function search(term,onload,onerror){
      var url,xhr,results;
      url = 'https://www.baidu.com/search?q=' + term;

      xhr = new XMLHttpRequest();
      xhr.open('GET',url,true);

      xhr.onload = function(e){
        if(this.status === 200){
          results = JSON.parse(this.responseText);
          onload(results);
        }
      };
      xhr.onerror = function(e){
        onerror(e);
      }
      xhr.send();
    }
    search("Hello",console.log,console.error);

运用promise来进行异步和回调的代理代码如下：


function search(term,onload,onerror){
  var url,xhr,results;
  url = 'https://www.baidu.com/search?q=' + term;

  xhr = new XMLHttpRequest();

  var p = new Promise(function(resolve,reject){
    xhr.open('GET',url,true);
    xhr.onload = function(e){
      if(this.status === 200){
        results = JSON.parse(this.responseText);
        resolve(results);
      }
    };
    xhr.onerror = function(e){
      reject(e);
    };
    xhr.send();
  });

  return p;
}

search("hello").then(console.log,console.error);