若依框架 request同步请求方式

原创已于 2023-01-09 17:48:59 修改 · 4.5k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-15 09:23:49 首次发布

本文介绍了如何在使用若依前后端分离框架时，将原本的异步接口改造为同步请求，包括修改API、页面调用方式及循环请求的处理。重点展示了如何在`getRandomQuestion`接口上应用newPromise，并演示了在created钩子中的调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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