머리말
인터페이스를 호출하고, 뉴스 목록을 반환하고, 뉴스 목록을 재활용하고, 각 뉴스의 ID를 사용하여 뉴스의 비디오 주소를 비동기적으로 요청하는 요구 사항이 발생했습니다. 이는 루프에서 인터페이스를 호출해야 합니다. for 루프를 사용하는 경우 인터페이스 요청이 완료되기 전에 for 루프가 이미 실행되었습니다. 그래서 그것을 처리하겠다고 약속하는 것으로 바꾸십시오.
시작
전반적인 아이디어는 다음과 같습니다. 먼저 배열을 저장한 다음 루프에서 각 약속을 생성한 다음 promise.all을 사용하여 호출한 다음 결과 배열을 반환합니다.
1. 먼저 루프에서 비동기 요청을 정의합니다.
getInfo(item ,index){
return new Promise((resolve,reject) => {
axios.post('/videoUrl',{
id:item.id}).then(res=>{
let url = res.data;
resolve({
id:item.id,url:url})
})
})
}
2. newsList는 시작 인터페이스에서 획득한 뉴스 목록이며 뉴스 목록을 반복하여 약속 배열을 얻습니다.
let promiseArr = this.newsList.map((item,index) => {
return this.getInfo(item, index)
})
3. promise.all을 사용하여 조정합니다.
Promise.all(promiseArr).then(value=>{
console.log(value);
//value:[{id: 1, url: "xxxxx"},
// {id: 2, url: "xxxxx"},
// {id: 3, url: "xxxxx"}]
this.newsList = value;
})
이와 같이 뉴스 영상의 주소를 포함하는 뉴스 목록을 얻는다.
모든 코드
<script>
export default {
name: 'empty',
data () {
return {
newsList:[]//新闻列表
}
},
methods:{
getNewsList(){
axios.get('/newsList').then(res=>{
this.newsList = res.data;//newsList = [{id:1},{id:2},{id:3}];
let promiseArr = this.newsList.map((item,index) => {
return this.getInfo(item, index)
})
Promise.all(promiseArr).then(value=>{
console.log(value);
//value:[{id: 1, url: "xxxxx"},
// {id: 2, url: "xxxxx"},
// {id: 3, url: "xxxxx"}]
this.newsList = value;
})
})
},
// 通过新闻id请求新闻视频地址
getInfo(item ,index){
return new Promise((resolve,reject) => {
axios.post('/videoUrl',{
id:item.id}).then(res=>{
let url = res.data;
resolve({
id:item.id,url:url})
})
})
}
},
mounted(){
this.getNewsList();
}
}
</script>
추신
1. 우선 배경 수정 인터페이스에 관해서는 정상적인 반환은 비디오 주소가 newsList에 반환되어야 하며 협상 후 별도로 호출되어야 합니다.
2. 이 문제를 해결하는 데 시간이 걸렸으며 이에 기록됩니다. 루프 + 비동기 요청에 대한 기사 참조 javascript로 인해 요청 순서가 일관되지 않음