欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Promise】Promise基本使用

程序员文章站 2022-07-03 09:32:32
...

示例代码:

// vue.js

let getData = (params) => {
  let promise = new Promise(function (resolve, reject) {
    getData(params).then(res => {
      if (res.data) {
        resolve("SUCCESS!")
      } else {
        reject("FAILED!")
      }
    })
  })
  return promise
}

this.getData (params).then((data)=>{
  //...
  console.log('the result is ' + data)
}).catch((data)=>{
  //...
  console.log('the result is ' + data)
})

这是一个从后台查询数据的方法,getData(params)方法向后台发送请求,看起来,Promise有点陌生,代码好像有点复杂。
回想一下,以前写过的代码里面,如果要实现:唯一性校验——>提交,实现方法可能是:

let submit(params){
  // 后台请求
  validate(params).then((res)=>{
    if(res && res.data === 'TRUE'){
      // 提交方法
      sumbitData(params).then((res) => {
        //其它操作
      })
    }
  })
}

这样的嵌套可能不仅有两层,这时,掉进了可怕的回调地狱。。再看看Promise,

Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

Pormise有三种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败),状态的变化只有两种方法。Promise有resolved和rejected来处理这两种变化。

let p = new Promise((resolve, reject) => {
  validate(params).then((res)=>{
    if(res.data === 'TRUE'){
      resolve(params)
    }else{
      reject(error)
    }
  })

  p.then((params) => {
    sumbitData(params).then((res) => {})
  }).catch((error)=>{
    console.log(error)
  })
})

当validate()成功执行时,调用resolve()方法,失败时,调用reject()方法。Promise有then(onfulfilled, onrejected)方法分别指定resolved状态和rejected状态的回调函数,then方法包含两个参数:onfulfilled 和 onrejected,它们都是 Function 类型,分别对应resolve和reject方法:
onfulfilled(data)——resolve(data),Promise状态为fulfilled;
onrejected(data) —— reject(data),Promise状态为rejected。
此外,Promise有catch方法来捕捉异常,类似于java的try...catch,也相差于then(null,errorFunc)。

then返回的是一个新的Promise,所以,可以用doSomething().then().then()...

例子待补。。。