2017-07-27 82 views
1

我有點困擾如何處理這個解決方案。我目前正在使用的框架是node.js和express.js,帶有用於視圖/呈現html的pug。我想要做的是渲染到一個頁面,並使用來自不同網站的單獨http獲取請求的值。我希望express/node查詢外部API,並呈現一個視圖,我將通過來自客戶端JavaScript的ajax調用來檢索。我已經找到了從客戶端使用jQuery的ajax調用。我的問題是如何處理多個外部API調用,並將結果放入一個對象中以在我的帕格視圖中呈現。我不確定最佳做法是什麼才能正確執行此操作。我是否創建模型?另外,我如何處理異步http獲取?使用承諾?我對節點和JavaScript都很陌生,所以我試圖看看最好的約定是什麼。 我希望這是有道理的。Express.js從外部API檢索信息並渲染到網站

謝謝!

apiInfoModel.js

var apiCallInfo = { 
    apiInfo1: APIDATA 
    apiInfo2: APIDATA2 
    apiInfo3: APIDATA3 
} 

我應該有我調用將返回APIDATA的功能?

apiCalls.js

function getApiInfo1() { 
    return http.get 
} 

function getApiInfo2() { 
    return http.get 
} 

function getApiInfo3() { 
    return http.get 
} 

apiInfoController.js

var apiInfo = require('./apiInfoModel') 
var apiCalls = require('./apiCalls') 
exports.apiInfo = function(req,res,next){ 
    apiInfo.apiInfo1 = apiCalls.getApiInfo1 
    apiInfo.apiInfo2 = apiCalls.getApiInfo2 
    apiInfo.apiInfo3 = apiCalls.getApiInfo3 
    res.render('apiInfo',{apiInfo: apiInfo}) 
} 
+0

您可能必須將apiInfo2的調用作爲getApiInfo1的回調等。 –

回答

1

爲了擴大對@Mauricio諾里斯·弗萊雷

apiCalls.js註釋 - 添加callback參數

function getApiInfo1(cb) { 
    return cb(http.get) 
} 

function getApiInfo2(cb) { 
    return cb(http.get) 
} 

function getApiInfo3(cb) { 
    return cb(http.get) 
} 

apiInfoController.js - 巢回調不得不所有結果

var apiInfo = require('./apiInfoModel') 
var apiCalls = require('./apiCalls') 
exports.apiInfo = function(req,res,next){ 

    apiCalls.getApiInfo1(function(info1Result) { 
     apiCalls.getApiInfo2(function(info2Result) { 
      apiCalls.getApiInfo3(function(info3Result) { 
       // now you have all 3 results 
       apiInfoResult = { 
        apiInfo1: info1Result, 
        apiInfo2: info2Result, 
        apiInfo3: info3Result 
       } 
       res.render('apiInfo', { apiInfo: apiInfoResult }) 
      }); 
     }); 
    }); 
} 

,因爲它使你需要做的每一個動作同步增長,此嵌套結構被稱爲pyramid of doom訪問。它可以通過使用工具庫一樣asynchttps://www.npmjs.com/package/async加以改進:

async.parallel([ 
     apiCalls.getApiInfo1, 
     apiCalls.getApiInfo2, 
     apiCalls.getApiInfo3 
    ], function(error, apiInfoResult) { 
     apiInfoResult = { 
      apiInfo1: info1Result, 
      apiInfo2: info2Result, 
      apiInfo3: info3Result 
     } 
     res.render('apiInfo', { apiInfo: apiInfoResult }) 
    }); 

但目前推薦的方法是使用Promises。這是在JavaScript中引入的新的API以處理這種情況。它在最近的NodeJS版本中可用。它消除了callbacks需要:

apiCalls.js - 收益承諾,而不是使用callbacks(該fetch庫做到這一點)

require('whatwg-fetch') 

function getApiInfo1() { 
    return fetch() 
} 

function getApiInfo2() { 
    return fetch() 
} 

function getApiInfo3() { 
    return fetch() 
} 

apiInfoController.js - 使用Promise.all

const [ 
     apiInfo1, 
     apiInfo2, 
     apiInfo3 
    ] = Promise.all([apiCalls.getApiInfo1, apiCalls.getApiInfo2, apiCalls.getApiInfo3]); 

    apiInfoResult = { apiInfo1, apiInfo2, apiInfo3 } 
    res.render('apiInfo', { apiInfo: apiInfoResult }) 
+0

謝謝@morgh!至於我如何創建對象,我總是不確定是以傳統的方式來對待它,還是將它們混合在一起。我想我問我的「模式」 – fabricatedmind

+0

然後,你可能想看看這個開源書系列:https://github.com/getify/You-Dont-Know-JS。他們使用乾淨的編碼習慣,你應該可以學習。此外,「異步」書中有更多關於我提到的所有回調/承諾的信息。 – shotor