vue는 여러 가지 방법이 실행된 후에 다른 방법을 실행합니다. (요청이 끝난 후에 실행될 때까지 기다립니다.) async/await 사용 방법과Promise.all

1577 단어 vue.jsJavaScriptbug
한 방법이 실행된 후에 다른 방법을 실행합니다
Promise를 사용합니다.이루다Promise는 ES6의 새로운 기능으로 비동기 조작 논리를 처리하는 데 사용되며, Promise에 then과catch 함수를 추가하여 성공과 실패를 처리하는 데 사용되었다.
ES7에서 ASync와 await를 새로 제안하였으며, ASync와 await를 사용하는 것을 권장합니다.
function fun1(){
    return new Promise((resolve, reject) => {
        /*        */
        console.log("1");
    });
},
function fun2(){
    return new Promise((resolve, reject) => {
        /*        */
        console.log("2");
    });
},
function fun3(){
    return new Promise((resolve, reject) => {
        /*        */
        console.log("3");
    });
},
/*    */
function run(){
    Promise.all([
        this.fun1(),
        this.fun2(),
        this.fun3()
    ]).then(res => {
        /*        */
        console.log("run");
    })
}

async/await 사용 방법
//  1

async function testSync() {
   const response = await new Promise(resolve => {
       setTimeout(() => {
           resolve("async await test...");
         }, 1000);
    });
      console.log(response);
 }
 
testSync();//async await test...

//  2

async getScheduleList(selectDate) {
	let response;
	//   request           
	await request(api.getScheduleList, {
		date: selectDate
	}).then(res => {
		response = res;
	});
	return response
}

init() {
	this.getScheduleList(selectDate).then(res => {
		console.log(res)
	})
}

//  3

swichMenu: async function() {
	//       menu
	const num = await  getNum()
	return num
}

swichMenu().then(res => {
	console.log(res)
})

좋은 웹페이지 즐겨찾기