angular/typescript中的顺序代码执行

如何使代码按顺序运行？比如说,

如果我有一个for循环，它从服务中获取一些数据，我希望

n+1

迭代只在

n

迭代完成后运行

我希望循环后的代码仅在for循环完成所有交互后执行

示例代码：

someMethod（）{
for（var i=0；i{
//对数据做点什么
}); 
}
// 
console.log（“仅在所有迭代之后打印我”）；
// ....
//还有几行代码
}

下面是另一个例子（）：

someMethod（）{
对于（变量i=0；i<5；i++）{
设置超时（（）=>{
log（'这是迭代'+i）；
},500);
}
//我只想在
//for循环已完成所有迭代。
console.log（“仅在所有迭代之后打印我”）；
// ....
//还有几行代码
}

---

有什么想法吗？

您可以将每个迭代都包装成一个承诺，然后等待它：

async function someMethod() {
    for (var i = 0; i < 5; i++) {
        await new Promise(resolve => {
            setTimeout(()=> {
                console.log('This is iteration ' + i); 
                resolve();
            }, 500);
        });
    }
    console.log ('print me only after all iterations');
}
someMethod();

异步函数someMethod（）{
对于（变量i=0；i<5；i++）{
等待新的承诺（解决=>{
设置超时（（）=>{
log（'这是迭代'+i）；
解决（）；
}, 500);
});
}
console.log（“仅在所有迭代之后打印我”）；
}
somethod（）；

somethod（i，长度）{
如果（i<长度）{
this.dataService.get（i）.subscribe（数据=>{
//做一些商业逻辑
这个方法（i+1，长度）；
}); 
}否则{
console.log（“迭代完成”）；
}}

---

试试这种合乎逻辑的方法

你在找类似的东西吗

导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
this.someMethod（）；
}
doTimeout（当前索引：int）{
返回新承诺（解决=>{
设置超时（（）=>{
log（“这是迭代”+currentIndex）；
解决（）；
},500);
});
}
异步方法（）{
对于（让i=0；i，因为Javascript是一种单线程语言，除非您使用
承诺或其他回调架构，否则很难实现您想要实现的目标

有很多方法可以通过
承诺
实现。在这里，我将向您展示如何在Angular framework中使用名为
异步和等待
的高级JavaScript概念来实现同样的目标

请注意，有很多方法是有希望的，但我的目的是向您介绍新的
异步&等待概念，您不需要为成功而连锁回调并拒绝方法

演示：

导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
this.someMethod（）；
}
const someMethod_Promise=（）=>{
返回新承诺（（解决、拒绝）=>{
对于（变量i=0；i<5；i++）{
console.log（'i'+i的打印值）；
if（i==4）//实条件
决心（正确）；
} 
})
}
const somethod=async（）=>{
让result=等待这个。someMethod_Promise（）；
如果（结果）{
console.log（“仅在所有迭代之后打印我”）；
}
}
}
我建议将其修改为使用rxjs中的
zip
组合运算符：


编辑：以下是一个示例：

尽管在您的情况下，可能必须将其作为数组传递（
zipArray
）。
基于承诺的解决方案：

Promise.all（）接受一个承诺数组并同时激发它们。然后，一旦所有承诺都得到解决，它将运行回调

let dataService = {
  get: function(i) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 100, i);
    });
  }
}

let promises = [];

for (var i = 0; i < 3; i++) {
    // get some data
    promises.push(dataService.get(i));
}

Promise.all(promises).then(values => { 
  console.log ('print me only after all iterations');
  console.log(values); 
});

让数据服务={
get：函数（i）{
返回新承诺（（解决、拒绝）=>{
设置超时（分辨率，100，i）；
});
}
}
让承诺=[]；
对于（变量i=0；i<3；i++）{
//获取一些数据
promises.push（dataService.get（i））；
}
Promise.all（promises）.then（values=>{
console.log（“仅在所有迭代之后打印我”）；
console.log（值）；
});

工作样本：

承诺。所有文件：

基于Rxjs的解决方案：

forkJoin基本上与Promise.all（）做相同的事情，但用于可观察对象

let dataService = {
  get: function(i) {
    return Rx.Observable.of(i);
  }
}

let observables = [];

for (var i = 0; i < 3; i++) {
    // get some data
    observables.push(dataService.get(i));
}


const example = Rx.Observable.forkJoin(observables);


const subscribe = example.subscribe(values => {
  console.log ('print me only after all iterations');
  console.log(values); 
});

让数据服务={
get：函数（i）{
第（i）项的可观测返回Rx；
}
}
设可观测项=[]；
对于（变量i=0；i<3；i++）{
//获取一些数据
push（dataService.get（i））；
}
常量示例=Rx.Observable.forkJoin（Observable）；
const subscribe=example.subscribe（值=>{
console.log（“仅在所有迭代之后打印我”）；
console.log（值）；
});

工作样本：

Rxjs forkjoin文档：
您可以承诺做到这一点

someMethod() : Promise<any> {

 return new Promise((resolve) => {
  for ( var i = 0; i < someLength; i++) {
        // get some data
        this.dataService.get(i).subscribe(data => {
            // do something with the data
        }); 

if(i==someLength-1){resolve();}
    }


}).then(()=>{ 


    // 
    console.log ('print me only after all iterations');

    // ....
    // some more lines of code
})
}

someMethod（）：承诺{
返回新承诺（（解决）=>{
for（var i=0；i{
//对数据做点什么
}); 
如果（i==someLength-1）{resolve（）；}
}
}).然后（（）=>{
// 
console.log（“仅在所有迭代之后打印我”）；
// ....
//还有几行代码
})
}
我想您需要像这样精确的..

只需运行代码片段即可看到结果


异步函数someMethod（）{
对于（变量i=0；i<5；i++）{
等待新的承诺（解决=>{
设置超时（（）=>{
log（'这是迭代'+i）；
解决（）；
}, 1500);
});
}
console.log（“仅在所有迭代之后打印我”）；
}
someMethod（）；
加上一个不错的答案。可能值得一提的是，这不起作用。
consol
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;

    this.someMethod();
  }

  doTimeout(currentIndex:int){
    return new Promise(resolve => {
      setTimeout(()=> {
        console.log("This is iteration " + currentIndex);
        resolve();
      },500);
    });
  }

  async someMethod() {
    for(let i=0;i<5;i++){
      await this.doTimeout(i);
    }
    // I want to execute this line of code only after the 
    // for loop has completed all iterations. 
    console.log ('print me only after all iterations'); 

    // ....
    // some more lines of code
  }
}

export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.someMethod(); 
  }

 const someMethod_Promise = () => {
  return new Promise((resolve,reject)=>{
     for ( var i = 0; i < 5; i++) {
       console.log('printing value of i ' + i);
        if(i==4)   // real condition
         resolve(true);
     } 
  })
 }

 const someMethod = async()=>{
   let result= await this.someMethod_Promise();
   if(result){
      console.log ('print me only after all iterations'); 
   }
 }
}

let dataService = {
  get: function(i) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 100, i);
    });
  }
}

let promises = [];

for (var i = 0; i < 3; i++) {
    // get some data
    promises.push(dataService.get(i));
}

Promise.all(promises).then(values => { 
  console.log ('print me only after all iterations');
  console.log(values); 
});

let dataService = {
  get: function(i) {
    return Rx.Observable.of(i);
  }
}

let observables = [];

for (var i = 0; i < 3; i++) {
    // get some data
    observables.push(dataService.get(i));
}


const example = Rx.Observable.forkJoin(observables);


const subscribe = example.subscribe(values => {
  console.log ('print me only after all iterations');
  console.log(values); 
});

someMethod() : Promise<any> {

 return new Promise((resolve) => {
  for ( var i = 0; i < someLength; i++) {
        // get some data
        this.dataService.get(i).subscribe(data => {
            // do something with the data
        }); 

if(i==someLength-1){resolve();}
    }


}).then(()=>{ 


    // 
    console.log ('print me only after all iterations');

    // ....
    // some more lines of code
})
}