js|js 一个接口调用完全以后再调用下一个接口 js一个接口调用完全以后再调用

开发过程中经常会遇到这种情况，一个接口的调用要依赖另一个接口返回的数据才能调用。这个时候就需要用到js的异步相关功能，用来实现功能。
功能要求：点击一个【申请XX】操作按钮，刷新整个页面，并打开弹框获取弹框最新数据
实现：
vue部分：

申请xx

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 = https://www.it610.com/article/true modalTitle.value ='申请xx' relatedObj.value = https://www.it610.com/article/{ 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 = https://www.it610.com/article/true modalTitle.value ='申请xx' relatedObj.value = https://www.it610.com/article/{ type: result.type, id: result.id, code: result.code, status: result.status } }) break } }

【js|js 一个接口调用完全以后再调用下一个接口】两种写法结果一样，都可以实现