如何灵活使用Promise提高代码可读性

目录

使用Promise规范请求

使用Promise的优势

回调地狱

链式调用

Promise写法要求

手撕Promise

同步调用--async、await

异步调用--Promise.all

实际场景演示

原始代码

整改方案

技术细节

小结

---

使用Promise规范请求

使用Promise的优势

1. 可以更容易地处理异步代码，避免了回调地狱现象，代码更加简洁和易于理解。

2. Promise可以链式调用，使得代码更加整洁和易于维护。

3. Promise支持异步和同步操作，并且可以轻松地将它们在代码中混合使用。

4. Promise可以提高代码的可读性和可维护性，在多人协作的项目中有很大的优势。

回调地狱

每个请求都需要在上一个请求返回之后才能知道后续的操作，这种请求方式称为“回调地狱”

// 例如需求：在一个博客网页中，登录成功后查询正在编辑的博客
// 实现如下：

// 调用登录接口
login({
    username: 'test',
    password: '123456'
}).then(res => {
    // 查询是否存在未完成的博客
    getBlogVisible().then(blog => {
        // 如果存在未完成的博客ID
        if(blog.blogId) {
            // 查询博客详情
            getBlogDetail({
                blogId: blog.blogId
            }).then(blogInfo => {
                // 在这里获取到需要的详情数据
            })
        }
    })
})

链式调用

在Promise回调函数中，如果返回体任然是Promise，则可以链式回调

requestA()
.then(() => requestB())
.then(() => requestC())
.then(res => {})

Promise写法要求

手撕Promise

const request = params => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(params)
    }, 3000);
  })
}

// 调用
request().then().catch()

同步调用--async、await

const request = params => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(params)
    }, 3000);
  })
}
const getRequest = async () => {
  const paramsA = await request();
  const paramsB = await request();
  const paramsC = await request();
}

异步调用--Promise.all

const request = params => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(params)
    }, 3000);
  })
}
const getRequest = () => {
  Promise.all([request(), request(), request()])
  .then(([paramsA, paramsB, paramsC]) => {})
  .catch()
}

实际场景演示

原始代码

onShow(){
  this.queryGetBankCardInfo()
  this.queryPingangetCustAcctIdByThirdCustId()
},
queryPingangetCustAcctIdByThirdCustId(){
  getCiticInfo().then(res=>{
    this.setData({
      paAccount:res.data
    })
    if(res.data.cardNums) {
      this.querySmallAmountTransferQuery()
    }
  })
},
querySmallAmountTransferQuery(){
  smallAmountTransferQuery({
    oldTranSeqNo:this.data.cardInfo.clientNo,
    tranDate:this.data.cardInfo.tranDate
  }).then(res=>{
    this.setData({
      ecrzInfo:res.success
    })
  })
},
queryGetBankCardInfo(){
  getBankCardInfo().then(res=>{
    this.setData({
      cardInfo:res.data
    })
  })
},

以上来自现有业务中的一段代码，可读性差并且存在请求异步的bug（当getCiticInfo请求早于getBankCardInfo请求时，smallAmountTransferQuery此接口参数将为空）

整改方案

// 当代码逻辑比较单一时，应当选择减少拆分
async onShow(){
  const { data: bankCard } = await getBankCardInfo();
  const { data: citic } = await getCiticInfo();

  if(citic.cardNums) {
    const { success } = await smallAmountTransferQuery({
      oldTranSeqNo: bankCard.clientNo,
      tranDate: bankCard.tranDate
    })
    this.setData({ ecrzInfo: success })
  }

  this.setData({
    cardInfo: bankCard,
    paAccount: citic
  })
},

技术细节

熟练掌握基础的技能，并在实际应用中搭配使用，提高可读性

• async、await
• Promise.then
• Promise.catch
• Promise.all
• es6

小结

在多人共同开发的项目中，提升可维护性是首要的，它对于开发者来说非常重要，因为一个易读的代码可以更好地被理解、维护和修改。