2014-11-04 86 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