javascript - javascript Promise 中的 Resolve 函数的行为不一致

Question

下面的函数接受一个单词数组，调用一个 api 来获取每个单词的信息，并将数据保存在 definitions 对象中。我使用了一个 promise ，在返回任何数据之前等待服务器响应。

function define(arr) { //pyramid of doom at the expense of adding abstraction
        return new Promise(function(resolve, reject) {
        var client = [];
        var definitions = {};
        for (var i = 0, len = arr.length; i < len; i++) {
            (function(i) {
                client[i] = new XMLHttpRequest();
                client[i].onreadystatechange = function() { 
                    if (client[i].readyState === 4 && client[i].status === 200) {
                    definitions[arr[i]] = JSON.parse(client[i].responseText);
                        if (Object.keys(definitions).length === arr.length) {
                        resolve(definitions); 
                        } 
                    } 
                };
                client[i].open('GET', 'http://api.wordnik.com:80/v4/word.json/' + arr[i] +
                '/definitions?limit=1&includeRelated=false&sourceDictionaries=all&useCanonical=false&includeTags=false&api_key=737061636520696e74656e74696f6e616c6c7920626c616e6',
                true);
                client[i].send();
                })(i);
            }
        });
    }

当带有 arr 参数的每个元素都是 Wordnik API 数据库中的单词时，上述程序可以正常工作。然而，当传入非单词时，程序就会崩溃。我想让它省略任何非单词或显示“未找到定义”。

resolve 函数创建一个点击事件处理程序，如果将非单词传递给 define，则当点击触发该事件处理程序时，会出现错误“Uncaught TypeError: Cannot read property '0' of代码为 obj[this.id][0].text 的行显示“undefined”。

我尝试将此条件添加到 onreadystate 匿名函数中:

if (client[i].responseText[0] === undefined) {
    client.responseText[0] = {
        word: arr[i],
        text: 'Definition not found'
    };

但这并不能解决任何问题。

Answer 1

responseText 是一个字符串。您在这里将其解析为 JSON:

definitions[arr[i]] = JSON.parse(client[i].responseText);

找不到定义的问题根本不在您的请求代码中。无论您在哪里使用 Promise 的结果，都应该检查定义数组是否为空。发生错误的地方听起来很有希望:

… the error "Uncaught TypeError: Cannot read property '0' of undefined" appears for a line with the code obj[this.id][0].text.

在读取obj[this.id][0].text之前，请确保obj[this.id].length !== 0。

var definitions = obj[this.id];
var something =
    definitions.length === 0 ?
        'Definition not found' :
        definitions[0].text;

此外，您还通过计算键数来重新实现 Promise.all。我建议创建一个单独的函数来定义一个单词。

var API_KEY = '737061636520696e74656e74696f6e616c6c7920626c616e6';

function queryString(map) {
    return '?' +
        Object.keys(map)
            .map(function (key) {
                return key + '=' + encodeURIComponent(map[key]);
            })
            .join('&');
}

function defineWord(word) {
    return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
        var uri =
            'http://api.wordnik.com/v4/word.json/' + encodeURIComponent(word) +
            '/definitions' + queryString({
                limit: 1,
                includeRelated: false,
                sourceDictionaries: 'all',
                useCanonical: false,
                includeTags: false,
                api_key: API_KEY,
            });

        request.addEventListener('error', reject);
        request.addEventListener('load', function () {
            resolve(this.response);
        });

        request.responseType = 'json';
        request.open('GET', uri, true);
        request.send(null);
    });
}

function define(words) {
    return Promise.all(words.map(defineWord))
        .then(function (results) {
            var definitions = {};

            results.forEach(function (result, i) {
                definitions[words[i]] = result;
            });

            return definitions;
        });
}