在JavaScript开关/案例中做出承诺

时间:2016-10-21 21:45:33

标签: javascript callback switch-statement

我有一个问题(如果我是诚实的话,那么两个人)会在交换机案例中获得承诺或回调。这是基本代码。

switch (page) {

  case 'contact':

   alert('contact in switch');

   var promise = $.get(page +'.json');
   promise.then(function(data){
     console.log("Items back! ", data);                     
   });

  break;
  .......

  console.log("Response data: ", data); // This is undefined

据我所知,由于异步功能的性质,在数据恢复之前,交换机会转到break,使data记录为undefined。所以我认为将break置于回调中会起作用,但事实并非如此。当我这样做时,应用程序完全停止工作。

所以我想我的第一个问题是如何让switch-case"等待"直到数据返回break之前。

我遇到的第二个问题是,我最终希望能够通过将switch包装在一个函数中来重用我的page,其中getPageData参数是用户导航到的页面的标题。回调将传回从undefined函数返回的数据。当我尝试此操作时,会导致pageContentLoader函数回调出现getPageData错误。

对于记录,下面代码中的pageContentLoader(page, function(data) { console.log("Back with data ", data); }); function pageContentLoader(page, callback){ var data; switch (page) { case 'contact': console.log('contact in switch'); getPageData(page,function(data){ console.log("Contacts back! ", data); }); break; case 'blog': console.log('blog in switch'); getPageData(page,function(data){ console.log("Posts back! ", data); }); break; default: alert('hey that page doesn't exist!'); } callback(data); // results in callback undefined!! } 是一个执行通用XMLHttpRequest的单独函数。它工作正常,因为数据在回调中被正确记录。

if (!req.param('param')) {
   // param does NOT exist - was not uploaded
   // This does not apply to file input params.
}

// However, the following will break as it will start a listener (upstream)
if (!req.file('param')) {
   // File was not uploaded
}

我相信有可能做到这一点,但到目前为止,我已经尝试了所有我能找到的运气。如果有人有任何指示或想在我的代码中告诉我我做错了什么,我将不胜感激!

4 个答案:

答案 0 :(得分:1)

这是我改编的Typescript中的最近示例:

private pageContentLoader = async (): Promise<any> => {
    try {
        switch(page) {
            case 'contact':
                return await getPageData(page).then((data) => {
                    console.log("Contacts back! ", data);
                    return data;
                })
            case 'blog':
                return await getPageData(page).then((data) => {
                    console.log("Posts back! ", data);
                    return data;
                })
            default:
                return 'Page does not exist';
        }   
    } catch (err) {
        throw err;
    }
}


private getPageContent = async () => {
    try {
        const contactPageData = await pageContentLoader('contact');
        const blogPageData = await pageContentLoader('blog');
    } catch (err) {
        throw err;
    }
};

答案 1 :(得分:0)

对于第一个问题: 您正在尝试加载可能尚未定义的值的值。 如上所述,您需要考虑学习异步编码的一些提示和技巧,但这是一个解决方案:

  switch (page) {
    case 'contact':
      alert('contact in switch');
      $.get(page +'.json').then(function(data){
        /* all the code AFTER fulfilling 
           the promise should BE here
         */
        handle_data(data);
      });
    break;

  //console.log("Response data: ", data); this should not be here
  ...

答案 2 :(得分:0)

只是较早就遇到了这个问题,解决方法如下:

async getResolvedPromises(myObject) {
    const promises = await Object.keys(myObject).map(async (k) => {
        switch (k) {
            case '1':
                const firstPromise = await asyncCallNumber1()
                return firstPromise
            case '2':
                const secondPromise = await asyncCallNumber2()
                return secondPromise
            case '3':
                const thirdPromise = await asyncCallNumber3()
                return thirdPromise
            default:
                return
        }
    })

    const data = await Promise.all(promises)
    return data
}

答案 3 :(得分:0)

以下是使用Promise构造函数的解决方案:

pageContentLoader('blog').then(function(data)
{
	console.log("Call to pageContentLoader results: ", data);   
});

function pageContentLoader(page)
{
	switch (page) {
		case 'contact':
			return new Promise(function(resolve)
			{
				console.log('contact in switch');
				getPageData(page).then(function(data)
				{
					console.log("pageContentLoader results: ",data);
					resolve(data)
				});
			});
			break;    
		case 'blog':
			return new Promise(function(resolve)
			{
				console.log('blog in switch');
				getPageData(page).then(function(data)
				{
					console.log("pageContentLoader results: ",data);
					resolve(data)
				});
			});
			break;    
		default:
			return new Promise(function(resolve)
			{
				console.log('default in switch');
				console.log("pageContentLoader results: doesn't exist");
				resolve("page doesn't exist");
			});
	} 
}

function getPageData(page)
{
	return new Promise(function(resolve)
	{
		window.setTimeout(function()
		{
			console.log('getPageData executed')
			resolve(page);
		},2000);
	});
}

enter code here