JavaScript Promise не выполняется тогда

Question

Я пытаюсь реализовать обещание в следующем JavaScript-коде, однако функция process.then никогда не происходит по какой-то причине. Может ли кто-нибудь понять, почему? Я создал новое обещание, и он выполняет, как я проверил это с логом консоли, однако он никогда не выполняет функции .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; 

Answer 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; довольно бессмысленно. Это действительно ничего не добавляет к вашему коду.