1、使用若依前后端分离框架时,处理逻辑时遇到需要同步请求后台的接口处理数据,默认接口都是异步请求。

2、首先需要修改api里面需要同步请求的request方法。使用new Promise来处理(POST请求)

//post请求
//原来的接口
export function getRandomQuestion(data) {
    return request({
        url: '/examination/paper/getRandomQuestion',
        method: 'post',
        data: data
    })
}
//修改后的接口
export async function getRandomQuestion(data) {
    return new Promise((resolve, reject) => {
        // request对象是对axios的封装,不用在意
        request({
            url: '/examination/paper/getRandomQuestion',
            method: 'post',
            data: data
        }).then(ret => {
            resolve(ret.data)
        })
    })
}
//get请求
//修改前的接口
export function getExaminationInfo(examinationId) {
    return request({
        url: '/examination/' + examinationId,
        method: 'get'
    })
}
//修改后的接口
export async function getExaminationInfo(examinationId) {
    return await request({
        url: '/examination/' + examinationId,
        method: 'get'
    })
}

2.1 在页面处理调用接口的方式。通过async和await来处理,await必须包含在async的方法里面。

//调用接口的方法,在方法名前加async,接口名前加await
async getRandomQuestionFunction(data) {
    var $data;
    await getRandomQuestion(data).then(response => {
         $data = response
    });
    return $data;
},

2.2 在需要循环请求后台接口的方法也加上async和await

async disposeData(){
	for(var i = 0;i< 5 ;i++){
		var res = await this.getRandomQuestionFunction("传给后台的值")
		console.log(res)
	}
}

3、在created中调起上述的方法逻辑。

Logo

快速构建 Web 应用程序

更多推荐