NativeScript 7-Angular移动端项目：修改异步fetch远程数据方法使其等待请求完成后再返回

你遇到的核心问题是异步代码的执行顺序——fetch是异步操作，它的then回调会在当前调用栈全部执行完毕后才触发。所以你的代码会先走完loading = false、打印"Length of MyItems 2"、返回空的ObservableArray这几步，之后才会拿到接口数据并更新myItems，这就是日志顺序颠倒的原因。

要让方法等待fetch请求完成后再返回结果，我们可以通过两种方式改造，结合NativeScript和Angular的生态，推荐用RxJS的Observable方案，或者用async/await的Promise方案，下面分别说明：

方案1：用async/await封装成异步方法 #

把方法改成异步函数，通过await等待fetch的结果，这样就能保证所有逻辑按顺序执行：

async getMyItemsFromDbRemote(loading: boolean): Promise<ObservableArray<MyItem>> { 
  let myItems: MyItem[] = []; 
  try {
    // 等待fetch请求完成
    const response = await fetch(this.serverUrlGET);
    // 等待json解析完成
    const r = await response.json();
    // 处理数据
    myItems = this.onGetDataSuccess(r); 
    console.log("Length of MyItems 1 = " + myItems.length); 
  } catch (err) {
    console.error(err); 
  }
  // 此时myItems已经有数据了
  loading = false; 
  console.log("Length of MyItems 2 = " + myItems.length); 
  return new ObservableArray(myItems); 
}

调用方式 #

因为方法返回的是Promise，调用时需要用await或者.then()来获取结果：

// 在组件或服务中调用
async loadItems() {
  let loading = true;
  // 等待方法返回有数据的数组
  const items = await this.yourService.getMyItemsFromDbRemote(loading);
  // 这里可以直接使用items
}

方案2：用RxJS Observable封装（更贴合Angular响应式风格） #

Angular本身大量使用RxJS，用Observable来封装异步流程会更符合项目的整体风格，也方便和其他响应式逻辑结合：

import { from, Observable } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';

getMyItemsFromDbRemote(loading: boolean): Observable<ObservableArray<MyItem>> { 
  // 把fetch的Promise转成Observable
  return from(fetch(this.serverUrlGET))
    .pipe(
      // 解析响应为JSON
      map(response => response.json()),
      // 转换为MyItem数组
      map(rawData => this.onGetDataSuccess(rawData)),
      // 执行副作用：打印日志、更新loading状态
      tap(myItems => {
        console.log("Length of MyItems 1 = " + myItems.length); 
        loading = false; 
        console.log("Length of MyItems 2 = " + myItems.length); 
      }),
      // 转换为ObservableArray返回
      map(myItems => new ObservableArray(myItems)),
      // 捕获并处理错误
      catchError(err => {
        console.error(err);
        loading = false;
        throw err; // 或者返回空数组的Observable，根据你的需求调整
      })
    );
}

调用方式 #

通过subscribe订阅Observable来获取结果：

loadItems() {
  let loading = true;
  this.yourService.getMyItemsFromDbRemote(loading).subscribe({
    next: items => {
      // 拿到有数据的ObservableArray，进行后续处理
    },
    error: err => {
      // 处理请求错误
    }
  });
}

注意事项 #

• 关于loading参数：因为boolean是原始类型，值传递的情况下修改方法内的loading不会影响外部变量。如果需要外部组件感知loading状态，建议用一个引用类型（比如{ isLoading: boolean }）或者RxJS的BehaviorSubject来管理状态。
• 两种方案都能保证日志顺序符合你的预期：

  Length of MyItems 1 = 5
  Length of MyItems 2 = 5
  

内容的提问来源于stack exchange，提问作者ittradco