angular - Angular/Ionic 链接 HTTP 调用不同步

Question

我目前正在使用一个有点痛苦的 API：D API 没有返回我的应用程序所需的完整信息，这意味着我必须进行多次调用才能获得所需的全部信息。另外，我正在努力保持头脑清醒，所以如果解释得不好，请告诉我！

发行的主要细节

当前的 API 流程看起来有点像这样：

获取“组 ID”列表（参见响应 1）。
使用该列表，对于每个组 ID，获取组中的组详细信息和类型（请参阅响应 2）。
使用组详细信息，为每种类型获取类型名称（参见响应 3）。
用所有细节构建一棵大树。
使用单独的端点，获取所有“技能”并相应地更新树（参见响应 4）。

当尝试在正确的位置返回正确的值时出现问题，这完全不同步，因为我将承诺嵌套在异步承诺的承诺中：O

主要 API 端点和示例可以在https://esi.tech.ccp.is/latest/找到。

我当前的代码看起来有点像下面（我尝试按调用顺序列出函数）。

问题是，我需要找到以下位置：

组列表已返回。
对于每个组，已返回包含的类型。
SkillTree 对象添加了一个新属性，其格式如下。

技能树目标：

skillTree = {
    "groupName": [
        "skillID": {
            "level": 0;
        },
        "skill2ID": {
            "level": 0;
        },...
    ],
    "group2Name": [
        "skillID" {
            "level": 0;
        },...
    ],...
};

tab-skills-all.ts（调用主函数）：

        eveESI.buildSkillTree().then(() => { 
            // Need to add names to all skills in tree...
            console.log('Completed skill tree:');
            console.log(eveESI.skillTree);
        }).catch((error) => { 
            // Do error handling...
        });

eveESI 提供者 - buildSkillTree():

     buildSkillTree(){
        return new Promise((resolve, reject) => {
            this.getSkillGroups().then((groups) => { 
                console.log('Success: Fetched groups successfully!');
                console.log(groups);

                // Process groups. First get group details including types. Then for each group push to main array.
                for (var i in groups) {
                    if (groups.hasOwnProperty(i)) {
                        this.getSkillsInGroup(groups[i]).then((data) => { 

                            var groupDetails = JSON.parse(data.toString());

                            var types = groupDetails.types;
                            var name = groupDetails.name;

                            console.log('Success: Fetched types for group ' + name + ' successfully!');

                            // Declare and build temp group object before we push it to main skill object...
                            var tempGroupObj = [];

                            // For each skill type in the group add to temporary array...
                            for (var n in types) {
                                if (types.hasOwnProperty(n)) {
                                    tempGroupObj[types[n]] = {};
                                    tempGroupObj[types[n]]['level'] = 0;
                                }
                            }

                            console.log(tempGroupObj);

                            this.skillTree[name] = tempGroupObj;

                        }).then(() => {

                        }).catch((error) => { 
                            // Do error handling...
                            console.log(error);
                        });
                    }
                }

                resolve();
            }).catch((error) => { 
                // Do error handling...
                reject();
            });
        });
    }

eveESI Provider - getSkillGroups() - 返回组 ID 的 [...] 参见响应 1：

     getSkillGroups(){
        return new Promise((resolve, reject) => {
            this.http.get(this.apiRoot + 'universe/categories/16/', { }, { Authorization: 'Basic YWUxYmIzZDU4ZmRiNDk1ZDk3ZTE1ZTE0OTIyZDc0ZDk6MnpsVjNLZzVHbTh4OHY5b2lUSENYOHVXR21PYjlHd2Rqc3htQ0NHOA=='})
            .then(reqResponse => {
                // Returns {} of skill groups from category...
                var responseJSON = JSON.parse(reqResponse.data);

                resolve(responseJSON.groups);
            }).catch(reqError => {
                // Error. Return error message...
                reject();
            });
        });
    }

eveESI Provider - getSkillsInGroup(id) - 返回 {...} 的组详细信息，请参阅响应 2：

    getSkillsInGroup(id){
        return new Promise((resolve, reject) => {
            this.http.get(this.apiRoot + 'universe/groups/' + id + '/', { }, { Authorization: 'Basic YWUxYmIzZDU4ZmRiNDk1ZDk3ZTE1ZTE0OTIyZDc0ZDk6MnpsVjNLZzVHbTh4OHY5b2lUSENYOHVXR21PYjlHd2Rqc3htQ0NHOA=='})
            .then(reqResponse => {
                resolve(reqResponse.data);
            }).catch(reqError => {
                // Error. Return error message...
                reject();
            });
        });
    }

响应 1（列出组 ID）：

{
  "category_id": 16,
  "name": "Skill",
  "published": true,
  "groups": [
    255,
    256,
    257,
    258,
    266,
    268,
    269,
    270,
    272,
    273,
    274,
    275,
    278,
    505,
    1209,
    1210,
    1213,
    1216,
    1217,
    1218,
    1220,
    1240,
    1241,
    1545
  ]
}

响应 2（返回组中的组详细信息和类型）：

{
  "group_id": 255,
  "name": "Gunnery",
  "published": true,
  "category_id": 16,
  "types": [
    3300,
    3301,
    3302,
    3303,
    3304,
    3305,
    3306,
    3307,
    3308,
    3309,
    3310,
    3311,
    3312,
    3315,
    3316,
    3317,
    11082,
    11083,
    11084,
    12201,
    12202,
    12203,
    12204,
    12205,
    12206,
    12207,
    12208,
    12209,
    12210,
    12211,
    12212,
    12213,
    12214,
    12215,
    20327,
    21666,
    21667,
    22043,
    24563,
    32856,
    41403,
    41404,
    41405,
    41406,
    41407,
    41408,
    41537
  ]
}

响应 3（按 ID 返回类型详细信息）：

{
  "type_id": 3300,
  "name": "Gunnery",
  "description": "Basic turret operation skill. 2% Bonus to weapon turrets' rate of fire per skill level.",
  "published": true,
  "group_id": 255,
  "market_group_id": 364,
  "radius": 1,
  "volume": 0.01,
  "packaged_volume": 0.01,
  "icon_id": 33,
  "capacity": 0,
  "portion_size": 1,
  "mass": 0,
  "dogma_attributes": [...],
  "dogma_effects": [...]
}

包.json

{
  "name": "name",
  "version": "0.0.1",
  "author": "author",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/browser-tab": "^4.4.2",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/deeplinks": "^4.4.2",
    "@ionic-native/http": "^4.4.2",
    "@ionic-native/secure-storage": "^4.4.2",
    "@ionic-native/spinner-dialog": "^4.4.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/sqlite": "^4.4.2",
    "@ionic-native/sqlite-porter": "^4.5.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "^2.1.3",
    "angular2-natural-sort": "0.0.2",
    "angular2-swagger-client-generator": "0.0.22",
    "cordova-android": "6.3.0",
    "cordova-plugin-advanced-http": "^1.9.0",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-native-spinner": "^1.1.3",
    "cordova-plugin-secure-storage": "^2.6.8",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.3.0",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-sqlite-storage": "^2.1.2",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.15",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "ngx-order-pipe": "^1.1.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "swagger-angular-generator": "^1.2.1",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.0.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.4",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-browsertab": {},
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "_CUSTOMURLSCHEME",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "localhost",
        "ANDROID_PATH_PREFIX": "/",
        "ANDROID_2_PATH_PREFIX": "/",
        "ANDROID_3_PATH_PREFIX": "/",
        "ANDROID_4_PATH_PREFIX": "/",
        "ANDROID_5_PATH_PREFIX": "/",
        "DEEPLINK_2_SCHEME": " ",
        "DEEPLINK_2_HOST": " ",
        "DEEPLINK_3_SCHEME": " ",
        "DEEPLINK_3_HOST": " ",
        "DEEPLINK_4_SCHEME": " ",
        "DEEPLINK_4_HOST": " ",
        "DEEPLINK_5_SCHEME": " ",
        "DEEPLINK_5_HOST": " "
      },
      "cordova-plugin-secure-storage": {},
      "cordova-plugin-native-spinner": {},
      "cordova-plugin-advanced-http": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-statusbar": {},
      "uk.co.workingedge.cordova.plugin.sqliteporter": {}
    },
    "platforms": [
      "android"
    ]
  }
}

score 0 · Accepted Answer

你应该使用 Observables，因为 Observables 是冷的，所以你可以创建它们，将它们存储在一个数组中，然后组合结果以便同时触发你的 http 请求，收集你需要的所有细节。

这是，在伪代码中（因为我不会复制你的整个实现），一个 Observable 链解决了你的问题：

getSkillGroups() {
    this.http.get(this.apiRoot + 'universe/categories/16/', {}, {Authorization: 'Basic YWUxYmIzZDU4ZmRiNDk1ZDk3ZTE1ZTE0OTIyZDc0ZDk6MnpsVjNLZzVHbTh4OHY5b2lUSENYOHVXR21PYjlHd2Rqc3htQ0NHOA=='})
        .switchMap(response1 => {
            const groupsDetails: Observable<any>[] = [];
            response1.groups.forEach(group => {
                groupsDetails.push(this.getSkillsInGroup(group));
            });
            //This will return an array of requests ready to be fired right when you call subscribe on it
            // When fired, the requests will be parallels, not sync.
            return Observable.combineLatest(groupsDetails);
        });
}

getSkillsInGroup(id){
    return this.http.get(this.apiRoot + 'universe/groups/' + id + '/', { }, { Authorization: 'Basic YWUxYmIzZDU4ZmRiNDk1ZDk3ZTE1ZTE0OTIyZDc0ZDk6MnpsVjNLZzVHbTh4OHY5b2lUSENYOHVXR21PYjlHd2Rqc3htQ0NHOA=='})
        .map(response2 => response2.data);
}

一旦你调用getSkillGroups()，你会得到一个response2-typed 数据数组，这意味着你可以添加一个新的map操作符，创建一个 Observables 数组来为技能添加细节。然后您可以订阅它并获得技能。

我强烈建议使用 Observables 而不是 Promise 来处理像这样的大案例，因为 Observable 允许你做更多的事情，并且在不使用do操作符更改数据的情况下轻松调试。

更多细节请访问rxjs 官方文档网站。

score 0 · Accepted Answer

我一直在寻找某种方法来完成一系列异步调用，并找到了这个男孩的文章。简而言之：使用 Observables 的类 forkJoin 方法。

查找名为 forkJoin 的部分

angular - Angular/Ionic 链接 HTTP 调用不同步

2 回答 2

Related

Reference