1

我正在尝试在以下 JavaScript 代码中实现一个承诺，但是由于某种原因，process.then 函数实际上从未发生过。谁能明白为什么？我已经设置了新的 Promise 并在我使用控制台日志对其进行测试时执行它，但是它从不执行 .then 函数

谢谢

function connect() {
    'use strict';
    //User Input
    var query = document.getElementById('query').value;
    //API key & URL
    var apiUrl = 'https://community-wikipedia.p.mashape.com/api.php?action=opensearch&search=' + query + '&limit=20&namespace=0&format=json';
    var apiKey = "xxxxx";


    //While requesting the data from API set the innerHTML to loading.
    //document.getElementById('suggestions').innerHTML='Loading your request...';
    document.getElementById('spin').style.display = 'inline';

    //Process the JSON data
    var process = new Promise(function (resolve, reject) {
        //Method for connecting to API
        var httpRequest = new XMLHttpRequest();

        //Opening the API URL
        httpRequest.open('GET', apiUrl, true);
        httpRequest.setRequestHeader("X-Mashape-Key", apiKey);
        httpRequest.send(null);
        //When state has changed then triggers processResponse function
        httpRequest.onload = function() {
            //Checks the response codes
            if (httpRequest.readyState === 4) {
                //document.getElementById('suggestions').innerHTML='';
                if (httpRequest.status === 200) {
                    var response = JSON.parse(httpRequest.responseText);
                    //Clear any previous results
                    document.getElementById('suggestions').innerHTML = '';
                    //Remove spinner when data is input
                    document.getElementById('spin').style.display = 'none';
                    resolve(response);
                } else {
                    alert('There was a problem with the request');
                    reject('No Good!');
                }
            }
        }
        process.then (function(response) {
            //Set response to response
            var response = response;
            //Grab suggestions div from DOM   
            var suggestions = document.getElementById('suggestions');
            //Create new element UL
            var list = document.createElement('UL');
            //Create new elements for li's
            var newLi, newText;
            //For all the text nodes
            var textNodes = [];
            //For all the li's
            var liList = [];
            //For all the links
            var links = [];
            //For loop to add and append all suggestions 
            for (var i = 0; i < response[1].length; i++) {
                //Replace spaces with underscore
                var setHTML = response[1][i].replace(/\s/g, '_');
                //Creates the appropriate link
                var link = 'http://en.wikipedia.org/wiki/'+setHTML;
                //Create new a elements in array
                links[i] = document.createElement('a');
                //Adds the link to links array
                links[i].href = link;
                //Create new text node with the response from api
                textNodes[i] = document.createTextNode(response[1][i]);
                //Create a new element 'li' into array
                liList[i] = document.createElement('li')
                //Append the response(textnode) to the a in the array
                links[i].appendChild(textNodes[i]);
                //Append the a to the li in the array
                liList[i].appendChild(links[i]); 
                //Append the li to the UL 
                list.appendChild(liList[i]);
            }
            //Append the UL to the suggestions DIV
            suggestions.appendChild(list);
        }  
    )}
)}



function init() {
    'use strict';
    document.getElementById("query").addEventListener("keyup", connect);
}
window.onload = init;
4

1 回答 1

1

你不应该把你process.then()的放在new Promise()街区里。

代替：

var process = new Promise(function (resolve, reject) {
    // Code
    process.then (function(response) {
       // Code
    }  
)}

利用：

var process = new Promise(function (resolve, reject) {
    // Code
)}
process.then (function(response) {
    // Code
}

这不是尝试访问process承诺范围内的变量，而是then为您的流程承诺正确设置一个。

而且，var response = response;很没有意义。它并没有真正向您的代码添加任何内容。

于 2014-11-04T14:30:54.557 回答