如何在请求JSON文件的URL中添加计数变量遍历项目ID

• 第一版代码：硬编码请求ID为1，仅能发起单次固定ID的请求，未实现遍历逻辑，自然无法拉取多个ID对应的数据。
• 第二版代码：仅在ID为0时发起了一次请求，while循环写在请求成功的回调函数内，仅对同一次请求的返回结果做了多次重复插入，没有为后续ID发起新的请求，所以不会拉取到其他ID的对应数据。

核心思路为遍历0~20的所有ID，为每个ID单独发起请求，请求成功说明是有效ID，存入结果列表；请求失败则说明是无效ID，直接跳过即可。

基础逐次请求写法 #

$scope.projectList = [];
// 遍历0到20的所有ID，使用let保证循环内的块级作用域
for (let id = 0; id <= 20; id++) {
    const targetURL = `https://happybuildings.sim.vuw.ac.nz/api/sooleandr/project.${id}.json`;
    $http.get(targetURL)
        .then(function successCall(response) {
            // 请求成功，将对应ID的数据存入列表
            $scope.projectList.push(response.data);
        })
        .catch(function errorCall() {
            // 请求失败说明ID无效，跳过即可
            console.log(`ID ${id} 为无效ID，已跳过`);
        });
}

兼容ES5的写法 #

如果项目环境不支持ES6的let语法，可改用立即执行函数处理循环变量的作用域问题：

$scope.projectList = [];
for (var id = 0; id <= 20; id++) {
    // 用立即执行函数锁定当前循环的ID值
    (function(currentId) {
        var targetURL = 'https://happybuildings.sim.vuw.ac.nz/api/sooleandr/project.' + currentId + '.json';
        $http.get(targetURL)
            .then(function(response) {
                $scope.projectList.push(response.data);
            })
            .catch(function() {
                console.log('ID ' + currentId + ' 为无效ID，已跳过');
            });
    })(id);
}

全请求完成后统一处理写法 #

如果需要等待所有ID的请求都执行完成后再做统一逻辑处理，可使用$q合并所有请求的Promise：

$scope.projectList = [];
const requestList = [];

for (let id = 0; id <= 20; id++) {
    const targetURL = `https://happybuildings.sim.vuw.ac.nz/api/sooleandr/project.${id}.json`;
    // 单个请求提前catch错误，避免单个无效ID请求失败导致全部请求被终止
    const request = $http.get(targetURL)
        .then(res => res.data)
        .catch(() => null);
    requestList.push(request);
}

// 等待所有请求执行完成
$q.all(requestList).then(function(results) {
    // 过滤掉无效ID返回的null值，得到所有有效ID的对应数据
    $scope.projectList = results.filter(item => item !== null);
});

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