vue之Promise19

认识Promise

• Promise是异步编程的一种解决方案。
• 一般情况下有异步操作时，使用promise对异步操作进行封装。
• 使用Promise可以避免回调地狱。

以下都用定时器来模拟异步事件
假设data是从服务器请求到的数据，console.log是处理方式

  setTimeout(function () {
    let data = 'Hello Vue'
    console.log(data);
  }, 1000)

效果

使用Promise处理异步操作

new Promise((resolve,reject) => {
    setTimeout(function () {
      resolve = 'Hello Vue'
      reject = 'Error'
    }, 1000)
  }).then(data => {
    console.log(data);
  }).catch(error => {
    console.log(error)
  })

Promise的三种状态

• pending：等待。如正在进行网络请求，或者定时器没有到时间。
• fulfill：满足。主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝。主动回调了reject时，就处于该状态，并且会回调.catch()

Promise链式调用

  setTimeout(function () {
    let data1 = 'hello vue'
    console.log(data1)
    console.log(data1)
    console.log(data1)

    setTimeout(function () {
      let data2 = data1 + ' ' + 'hello promise'
      console.log(data2);
      console.log(data2);
      console.log(data2);

      setTimeout(function () {
        let data3 = data2 + ' ' + 'vue yyds'
        console.log(data3);
        console.log(data3);
        console.log(data3);
      }, 1000)
    }, 1000)
  }, 1000)

效果

使用Promise处理

let data1 = 'hello vue'
  let data2 = 'hello promise'
  let data3 = 'vue yyds'

  new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(data1)
    }, 1000)
  }).then(data => {
    console.log(data)
    console.log(data)
    console.log(data)
    return Promise.resolve(data + ' ' + data2)
  }).then(data => {
    console.log(data)
    console.log(data)
    console.log(data)
    return Promise.resolve(data + ' ' + data3)
  }).then(data => {
    console.log(data)
    console.log(data)
    console.log(data)
  })

效果

简写：

• resolve的简写
  • return Promise.resolve(data + ' ' + data3)
  • return data + ' ' + data2
• reject的简写
  • return Promise.reject(err)
  • throw err

let data1 = 'hello vue'
let data2 = 'hello promise'
let data3 = 'vue yyds'

new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve(data1)
  }, 1000)
}).then(data => {
  console.log(data)
  console.log(data)
  console.log(data)
  return data + ' ' + data2
}).then(data => {
  console.log(data)
  console.log(data)
  console.log(data)
  return data + ' ' + data3
}).then(data => {
  console.log(data)
  console.log(data)
  console.log(data)
})