关于javascript:js-一个接口调用完全以后再调用下一个接口

开发过程中常常会遇到这种状况，一个接口的调用要依赖另一个接口返回的数据能力调用。这个时候就须要用到js的异步相干性能，用来实现性能。

性能要求：点击一个【申请XX】操作按钮，刷新整个页面，并关上弹框获取弹框最新数据
实现：
vue局部：

<a-button 
  class="defaultBtn" 
  @click="openModal('apply', infoObj)"
>申请xx</a-button>
 
<ApplyRefundModal
   v-if="applyIsShow"
   v-model:visible="applyIsShow"
   :dialogTitle="modalTitle"
   :afterSaleType="1"
   :relatedObj="rRelatedObj"
   @stationSave="rebackStationSave"
/>

ui：

js局部：写法1

const getDetail = () => { 
    // 获取以后页面数据 
    // ...
    return new Promise(resolve => {
        http.api(params).then(res => {
            // 一些数据操作
            // 返回后果
            resolve(res)
        }).catch()
    })
}
const openModal = async (type, data) => {
  switch (type) {
    case 'apply': // 申请 点击申请从新调用接口
      // 加大括号的目标是为了让数据处于以后作用域，使得传给弹框页的数据是最新数据
      {
        const result = await getDetail()
        applyIsShow.value = true
        modalTitle.value = '申请xx'
        relatedObj.value = {
          type: result.type,
          id: result.id,
          code: result.code,
          status: result.status
        }
      }
      break
    }
}

写法2:

const getDetail = () => { 
    // 获取以后页面数据 
    // ...
    return new Promise(resolve => {
        http.api(params).then(res => {
            // 一些数据操作
            // 返回后果
            resolve(res)
        }).catch()
    })
}
const openModal = async (type, data) => {
  switch (type) {
    case 'apply': // 申请 点击申请从新调用接口
      getDetail().then(result => {
        applyIsShow.value = true
        modalTitle.value = '申请xx'
        relatedObj.value = {
          type: result.type,
          id: result.id,
          code: result.code,
          status: result.status
        }
      })
      break
    }
}

两种写法后果一样，都能够实现