Javascript#promise对象

1.promise对象的作用

promise对象是ECMAscript6原生提供的，promise对象表示未来将要发生的事件
promise对象是为了解决异步操作问题的

2.promise对象的介绍

2.1promise对象的特点

1.对象状态不受外界影响

promise对象代表一个异步操作，有三种状态

• pending：初始状态，不是成功或者失败状态（比如正在进行网络请求，或者定时器没有到时间）
• fulfilled：意味着操作完成（当我们主动调用resolve时候，并且会调用.then()）
• rejected：意味着操作失败(当我们主动回调reject时，并且会回调.catch())
  只有异步操作的结果，可以决定当前是哪一种状态

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

promise对象状态改变的两种可能

1. 从pending变为resolve
2. 从pending变为rejected
   只要发生这两种情况的变化，就一直会保持这个结果。就算改变已经发生了，再对promise对象添加回调函数，也会立即得到这个这个结果
   这与事件完全不同的，事件的特点是，如果你错过了他，再去监听，是得不到结果的

2.2promise对象的优缺点

2.2.1优点

• 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数（防止回调地狱）
• promise对象提供统一的接口，使得控制异步操作更加容易

2.2.2缺点

• promise对象无法取消的。一旦新建了他就会立即执行，无法中途取消。
• 如果不设置回调函数，promise内部抛出的错误，不会反应到外部
• 当处于pending状态时候，无法得知目前进展到那个阶段了。

3.promise对象的使用

3.1promise对象初步使用

 new Promise((resolved,rejected)=>{
      // 为了模仿异步操作，我们可以在这里定义一个定时器函数
      //常见的异步操作：1.网络请求2.定时器函数。3，事件函数4.回调函数
      setTimeout(function(){
          console.log('我很好');
          // 这里调用resolved函数之后，会回调then函数
          resolved('你好')
      },2000)
  }).then(mes=>{
    console.log(mes);
  })

3.2promise对象链式调用

直接上代码

new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve('111')
    }, 1000);
  }).then(res=>{
    // 1.处理代码
  console.log(res,'第一次处理');
  // 2.对结果进行第一次处理
  //每次都返回一个promise的对象
  return Promise.resolve(res+'111')
  }).then(res=>{
    console.log(res,'第二次处理');
    return Promise.resolve(res+'b')
  }).then(res=>{
    console.log(res,'第三次处理代码');
    //在这一步，我调用了reject方法，所以，之后then回调函数的代码不会正常执行，会找catch里边的代码，
    //这里也可以手动抛出错误
    //  throw 'error message'+res
    return Promise.reject(res+'第三次出错')
  }).then(res=>{
    // 不是执行这一步
    console.log(res);
    return Promise.resolve(res+'c')
  },
  //相当于.catch
  err=>{
    console.log('我是reject的回调'+err);
  }).then(res=>{
    // 这些都不会正常执行 这里res变成undefined了
    console.log(res+'我不会正常执行了');
  })

这样的链式调用有缺点，我们不知道什么时候代码出错，会调用reject(当然这里，我们直接能看出来我们手动调用了reject方法，但是在真正的网络请求的时候，我们并不知道什么时候出错)

3.2.1最原始的链式调用，是每次都返回一个Promise对象

3.3promise对象all方法

在进行网络请求的时候，有时候我们需要进行多次请求，然后对数据进行统一处理，这个时候我们可以使用all方法

//用setTimeouut来模仿网络请求
Promise.all([
    new Promise((resolved,rejected)=>{
     setTimeout(function(){
        console.log('1');
        resolved('resolved1')
      },5000)
    }),
   new Promise((resolved,rejected)=>{
    setTimeout(() => {
       console.log('2');
       resolved('resolved2')
     }, 3000);
   })
  ]).then(res=>{
    // 这里输出的是一个数组
    console.log(res);
  })

输出结果

axios 就是由 promise 封装的一个 http 的库

写在最后： 此文章仅记录学习，有不足之处，欢迎指正！