（4）vue中的Promise

Promise

     1.介绍

• es6引入，异步编程的解决方案。

• promise中的执行代码会有两个参数：resolve和reject。

• resolve调用后，会执行then后面的代码。

• reject调用后，会执行catch后面的代码

// 第一种写法
new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(‘test1‘)
        // resolve(‘test2‘)
        reject()
    },1000)
}).then((data)=>{
    console.log(data)
}).catch(()=>{
    console.log(‘catch!‘)
})

// 第二种写法：直接传两个参数对应resolve和reject
new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(‘test1‘)
        // resolve()
        reject()
    },1000)
}).then(()=>{
    console.log(‘test2‘)
},()=>{
    console.log(‘test3‘)
})

       2.链式调用

• 链式调用写法：

• //第一种嵌套写法
  new Promise((resolve,reject)=>{
      setTimeout(()=>{
          resolve(‘aaa‘)
      },1000)
  }).then((data)=>{
      console.log(data+‘第一行处理代码‘)
      return new Promise((resolve)=>{
          resolve(data+‘111‘)
      })
  }).then((data)=>{
      console.log(data+‘第二行处理代码‘)
      return new Promise((resolve)=>{
          resolve(data+‘222‘)
      })
  }).then((data)=>{
      console.log(data+‘第三行处理代码‘)
  })
  
  //第二种：第一种写法的简写
  new Promise((resolve,reject)=>{
      setTimeout(()=>{
          resolve(‘aaa‘)
      },1000)
  }).then((data)=>{
      console.log(data+‘第一行处理代码‘)
      return Promise.resolve(data+‘111‘)
  }).then((data)=>{
      console.log(data+‘第二行处理代码‘)
      return Promise.resolve(data+‘222‘)
  }).then((data)=>{
      console.log(data+‘第三行处理代码‘)
  })
  
  //第三种：第二种写法的简写
  new Promise((resolve,reject)=>{
      setTimeout(()=>{
          resolve(‘aaa‘)
      },1000)
  }).then((data)=>{
      console.log(data+‘第一行处理代码‘)
      return data+‘111‘
  }).then((data)=>{
      console.log(data+‘第二行处理代码‘)
      return data+‘222‘
  }).then((data)=>{
      console.log(data+‘第三行处理代码‘)
  })

  3.Promise的三种状态

  • 异步操作之后会有三种状态。

  • pending：等待状态，比如正在进行网络请求。

  • fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()。

  • reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()。

  4.等待多个异步结果

  • 通过Promise.all()方法，可以等待多个任务执行结束后再进行处理

    Promise.all([
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(‘t1‘)
            },5000)
        }),
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(‘t2‘)
            },1000)
        })
    ]).then((results)=>{
        console.log(results)
    })

    更多promise的异步实例：https://www.hangge.com/blog/cache/detail_1638.html

原文：https://www.cnblogs.com/ai-jiang/p/vue-4.html