Promise对象

maxmin 发布于2019-08-22 18:25 / 2098人阅读

摘要：对象这个东西吧，它一直困扰我很久很久了，但是之前未能静下心来好好研究下，现在终于有时间好好鼓捣一下了。

Promise 对象

promise这个东西吧，它一直困扰我很久很久了，但是之前未能静下心来好好研究下，现在终于有时间好好鼓捣一下了。
顺带记录下吧~~

特点

then的链式调用

Promise.all()

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

一种异步编程的解决方案
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
then方式是定义在Promise.prototype上的，所以Promise实例就能调用这个方法，添加状态改变时的回调函数了

特点

对象的状态不受外界影响
Pending => Resolve
Pending => Fulfilled

一旦状态改变就不会再变，任何时候都可以得到这个结果

then 的链式调用 第一个回调函数返回正常值

使用Mock模拟接口，定义了两个接口

Mock.mock("http://g.cn", {
    "data|0-10": [{
        "id|+1": 1,
        "thscode|1-100.2": 1,
        "zqjc": Mock.Random.csentence(5)
    }]
});

Mock.mock("http://q.cn", {
    "data|0-10": [{
        "id|+1": 1,
        "jgcg": Mock.Random.csentence(5)
    }]
});

获取ajax的通用函数，接收url地址作为参数

function getAjax(url){
  return new Promise(function(resolve, reject) {
    axios.get(url)
    .then(function(response){
      resolve(response);
      console.log("ajax 1:", response);
    })
    .catch(function(err){
      reject(err);
      console.log(err);
    });
  });
}

下面的代码使用then方法依次指定了两个回调函数。
第一个回调函数完成后，会将返回结果
作为第二个回调函数的参数传入
通过运行结果即可知

function getIndexData(){
  getAjax("http://g.cn").then(function(res) {
    console.log("第一个then: ", res);

    return res.data;
  })
  .then(function(res) {
    console.log("第二个then: ", res);
  }).catch(err => {
    console.log(err);
  })
}

getIndexData()

第一个回调函数返回的仍旧是一个promise

如果是这样，也就是还存在异步，则第二个回调的执行就需等待第一个执行完毕，不管是resolve还是reject

function getAjax2(url){
  return new Promise(function(resolve, reject) {
    axios.get(url)
    .then(function(response){
      setTimeout(() => {
        resolve(response);
      }, 2000);

      console.log("ajax 2:", response);
    })
    .catch(function(err){
      reject(err);
      console.log(err);
    });
  });
}

function getIndex2Data() {
  getAjax("http://g.cn").then(res => {
    return getAjax2("http://q.cn");
  })
  .then(res => {
    console.log("in the data: ", res);
  })
  .catch(err => {
    console.log(err);
  });
}

getIndex2Data();

Promise.all()

如下代码，定义了p1、p2，和p
p的状态是由p1和p2决定的

只有p1和shup2的状态都变成了Fulfilled，p的状态才会变成Fulfilled，此时p1和p2的返回值组成一个数组，传递给p的回调函数；

只要p1、p2的状态中有一个被Rejected，p的状态就变成Rejected，此时第一个被Rejected的实例的返回值会传递给p的回调函数

均为p1和p2增加了catch函数，则，如果p1或者p2发生reject或者其它异常，那么会由自己的catch函数捕获，等到执行完catch，实例的状态也变成了resovled

var p1 = new Promise((resolve, reject) => {
  resolve("one corgi");
})
.then(res => res)
.catch(err => err)

var p2 = new Promise((resolve, reject) => {
  resolve("two corgies");
})
.then(res => res)
.catch(err => err)

var p = Promise.all([p1, p2]);

p.then(res => {
  console.log(res);
})
.catch((err) => {
  console.log("all:", err);
});
// 输出： ["one corgi", "two corgies"]

增加p3，不带catch，则最终的就会被p的catch捕获了

var p3 = new Promise((resolve, reject) => {
  reject("Error");
})
.then(res => res)

var p = Promise.all([p1, p2, p3]);

p.then(res => {
  console.log(res);
})
.catch((err) => {
  console.log("all:", err);
});

//输出： ["all: Error]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95845.html

Promise——从阅读文档到简单实现（一）

摘要：意味着操作成功完成。方法接收失败情况的回调函数作为参数，返回一个对象。参数回调函数不接收任何参数，当对象变成状态时被调用。现在各个方法的参数返回值功能和使用方法已经有个大概的了解了，为了进一步理解其原理，接下来我打算简单地实现一下它。前言最近几周参加笔试面试，总是会遇到实现异步和处理异步的问题，然而作者每次都无法完美地回答。在最近一次笔试因为 Promise 而被刷掉后，我终于下定...

yanwei 2019-08-23 15:57 评论0 收藏0
关于Promise

摘要：反之，操作失败，对象由状态转换为状态，此时回调函数会执行方法。这里需要注意的是，虽然在之后便执行了方法，但是并不是意味着往后的对象不执行了，其他的还是对象还是要执行的，只是不会再调用函数。在掘金上看见一篇写promise的文章，感觉作者写的很棒，文章链接在这：八段代码彻底掌握 Promise 。看完之后感觉学到了很多，所以又重新把JavaScript Promise迷你书（中文版）...

546669204 2019-08-20 18:30 评论0 收藏0
js-Promise

摘要：总结用方法创建对象用或添加对象的处理函数它的作用是为实例添加状态改变时的回调函数。方法是的别名，用于指定发生错误时的回调函数。一、为什么需要Promise Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是...

xcold 2019-08-23 15:40 评论0 收藏0
简单学习 Promise 对象

摘要：方法是的别名，用于指定发生错误时的回调函数。由于字符串不属于异步操作判断方法是字符串对象不具有方法，返回实例的状态从一生成就是，所以回调函数会立即执行。出错了等同于出错了出错了上面的代码生成一个对象的实例，状态为，回调函数会立即执行。引言 Promise 是异步编程的一种解决方案，比传统的解决方案——回调和事件——更合理且强大。最近的项目要用到这个，就参照阮一峰老师的《ES6标准入门...

muzhuyu 2019-08-23 14:02 评论0 收藏0
尝试实现一个Promise

摘要：的实现说明没有执行里的函数说明执行了里的函数说明执行里的函数过程中出现错误和执行状态时的回调函数后返回的结果都需要执行传进来的对象不能等于当前的对象回调返回的值或者的值是对象时需要等待该对象的状态变更设置当前状态的状态和值执行回调队列里的函 function resolve_promise_value(promise,value) {//PromiseA+的实现 var th...

DTeam 2019-08-20 14:21 评论0 收藏0
关于promise的小结

摘要：则是把类似的异步处理对象和处理规则进行规范化，并按照采用统一的接口来编写，而采取规定方法之外的写法都会出错。这个对象有一个方法，指定回调函数，用于在异步操作执行完后执行回调函数处理。到目前为止，已经学习了创建对象和用，方法来注册回调函数。 Promise 本文从js的异步处理出发，引入Promise的概念，并且介绍Promise对象以及其API方法。 js里的异步处理可以参考这篇文章...

Tony_Zby 2019-08-20 17:44 评论0 收藏0