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

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