序文
このような要件が発生しました。インターフェイスを呼び出し、ニュース リストを返し、ニュース リストをリサイクルし、各ニュースの ID を使用してニュースのビデオ アドレスを非同期に要求します。これには、ループ内でインターフェイスを呼び出す必要があります。for ループを使用する場合、for ループはインターフェイス要求が完了する前にすでに実行されています。したがって、それを処理することを約束するように変更してください。
始める
全体的な考え方は、まず配列を保存し、次にループ内で各 Promise を生成し、それを 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 は start インターフェースで取得したニュースリストであり、ニュースリストをループして Promise 配列を取得します。
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 により、リクエストの順序が矛盾する