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
    }
}

两种写法结果一样，都可以实现