문제 설명
최근에 여러분과 공유하고 싶은 이상한 요구 사항을 발견했습니다.
백엔드에서 다음 데이터가 포함된 배열을 반환한다고 가정해 보겠습니다:
let arr = [
{
name: '손오공',
id: '111',
age: null
},
{
name: '피기백',
id: '222',
age: null
},
{
name: ' ,
id: '444',
age: null
},
{
name: '백룡마',
id: '555',
age: null
},
]
- 각 항목의 연령은 여기에서 직접 반환되지 않습니다.
- 각 항목의 연령은 프런트엔드에서 이름을 매개변수로 사용하여 다른 인터페이스를 호출한 다음 특정 사람의 연령을 요청해야 합니다.
- 어떤 친구는 연령 필드에 있는 배열 List에 직접 할당된 SQL 문을 통해 연령을 확인하지 않냐고 물었습니다.
- 일반적으로는 필수 항목이지만 특정 상황에서는 다음과 같습니다.
- 연령 필드 데이터를 가져오기 위해 특별히 다른 요청을 보낼 수 있는 것은 사실입니다.
그래서:
- 이 배열을 얻은 후에는 요청을 루프로 전송해야 합니다.
- 이름과 해당 나이를 가져옵니다.
인터페이스 함수
function getAge(name) {
return new Promise((resolve, reject) => {
axios.get(`/api/getAge?name=${name}`).then((res) => {
let age = res.data.data.age
console.log(` ${name} 약속의 시대 ${age}`);
resolve(age)
}).catch((err) => {
reject(err)
})
})
}
예시:
- /api/getAge?...
- /api/getAge?...
- Return:
{
"code": "0",
"message": " ,
"data": {
"age": 500 // 88
}
}
Promise.all 사용하기 맵 루프 사용
- Promise.all은 배열을 수신해야 하므로 여기서는 forEach 루프를 사용할 수 없습니다.
- 그리고 forEach는 물건을 반환하지 않습니다.
- 따라서 Promise.all에서 사용할 수 있는 구토의 배열을 반환하는 맵을 사용하는 것이 적절합니다.
- 다음을 참조하세요:
async function getAgeFn(arr) {
// 루프에서 배열에 값 할당하기
let newArr = arr.map(async (item) => {
item.age = await getAge(item.name) // 연령 할당 대기
return item
})
// Promise배열 받기
await Promise.all(newArr)
// 실행이 완료된 후 계속 진행하기
console.log('최종 처리된 배열 결과: ', arr);
}
getAgeFn(arr)
전체 코드
과제를 붙여넣어 다음을 보여줄 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복되는 비동기 요청</title>
<script src="https://..net/ajax/libs/axios/..0/.js"></script>
</head>
<body>
<script>
let arr = [
{
name: '손오공',
id: '111',
age: null
},
{
name: '피기백',
id: '222',
age: null
},
{
name: '백룡마',
id: '555',
age: null
},
]
function getAge(name) {
return new Promise((resolve, reject) => {
axios.get(`http://.work/api/getAge?name=${name}`).then((res) => {
let age = res.data.data.age
console.log(` ${name} 약속의 시대 ${age}`);
resolve(age)
}).catch((err) => {
reject(err)
})
})
}
async function getAgeFn(arr) {
// 루프에서 배열에 값 할당하기
let newArr = arr.map(async (item) => {
item.age = await getAge(item.name)
return item
})
// Promise배열 받기
await Promise.all(newArr)
// 실행이 완료된 후 계속 진행하기
console.log('최종 처리된 배열 결과: ', arr);
}
getAgeFn(arr)
</script>
</body>
</html>
