2014-11-04 69 views
1

我想实现对以下JavaScript代码的承诺,但process.then函数从来没有实际发生的某种原因。任何人都能看到为什么我已经建立了新的承诺,它执行正如我与控制台日志测试它,但它从来没有执行。那么功能JavaScript承诺没有执行然后

感谢

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; 

回答

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;是毫无意义的。它并没有真正添加任何东西给你的代码。

+0

真棒,它的工作原理,谢谢:)我了解var response = response我只是把它放在那里,以防万一它没有正确地选择它。但现在我看到没有意义! – Adam91Holt 2014-11-04 14:38:20

+0

@ Adam91Holt:不客气!总是乐于成为帮助:-) – Cerbrus 2014-11-04 14:42:34