未加星标

js: Convert a callback to a promise

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
Convert a callback to a promise

4:45 javascript lesson byWill Button

Promises are rapidly overtaking callbacks in popularity. In this lesson, I show you how to rewrite a callback using ES6 Promises. After getting a handle on the basics, we'll convert an error-first style callback to use the Resolve and Reject handlers built into Promises. If you aren't familiar with Promises, this lesson can be a great starting point by learning how to duplicate the behavior of a callback with ES6 Promises.

Share this lesson: Facebook Twitter Google+

Get the Code Now

click to level up

Comment Guidelines

Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.

Commenting Guidelines

Here are some basic guidelines for commenting on egghead.io.

Be on-topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contactclick here.

Avoid meta-discussion

Is your comment resembles:

This was great! This was horrible! I didn't like this because it didn't match my skill level. +1

It will likely be deleted as "meta".

Code problem?

Should be accompanied by code! JSFiddle, Plunker, CodePen, etc all provide a way to share code and discuss it in context.

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

egghead.io comment guidelines

egghead.io about 1 hour ago

Promises are rapidly overtaking callbacks in popularity. In this lesson, I show you how to rewrite a callback using ES6 Promises. After getting a handle on the basics, we'll convert an error-first style callback to use the Resolve and Reject handlers built into Promises. If you aren't familiar with Promises, this lesson can be a great starting point by learning how to duplicate the behavior of a callback with ES6 Promises.

On the screen, I've got a really basic callback function and let me start just by showing you how that works by calling a Node command and passing in the name of that file. It starts off by calling the start function and that writes out to the log calling the wait function, and then calls the wait function passing in two parameters, a timeout, and the callback.

When that wait function is called, it writes out to the console that it's waiting, starts the timeout. When that timeout completes, it writes out to the console, "Done waiting," and calls the callback which is this end function and writes out, "Finished waiting." How can we create this in a promise? Let's start by creating our wait function again. This time, it's just going to have a single parameter of the delay.

It's going to write out to the console that it's waiting, and then we're going to return a new promise that has resolve parameter, and then we're going to have our setTimeout function. Like before, it will write out to the console upon completion that it's done waiting. We're going to call that resolve method that we passed in. We'll give it a delay and then close everything out.

Next, let's create our start function. It has no parameters and it will be almost identical to the callback based version, the difference being that it only has one parameter to call for the wait function. After that, we're going to use the .then to call the end function when that promise has been resolved. We need to create our end function, so I'll do that.

It's identical because it's just simply going to write out that it's finished waiting. Now, if we run that Node followed by the name of the file, which is promise.js, and we execute it, it starts off with calling the start method which writes out that it's calling the wait function. The wait function writes out that it's waiting.

Whenever that timeout expires, the promise is resolved then it writes out the phrase, "Done waiting," and then triggers the .then methods which calls our end function to write out that it's finished waiting, so functionally, it's identical to our callback. Hopefully, a lot of the callback she deals with follows the error first model. I've modified our callback here on the left to reflect that.

What that means is that our callback accepts two parameters an error object and response object and whenever we call it, for example, in my wait function, I modified it to check to see that the delay we passed in is actually a number. If it's not, then we're going to error out that callback. We call the callback with the first parameter as our error message.

If we do get a number, then we're going to execute it as normal. When we call the callback, it will provide null as that first parameter because there's not an error, and then our response as the second parameter. How can we duplicate that logic over in our promise? The first thing we'll do is we will add a reject parameter. We'll do the same check to see if our delay is a number.

If it's not, we're going to call that reject method and provide a string saying that it's not a number. Otherwise, we'll execute our timeout. We'll change the four banning a little bit, move my console log statement that we're waiting down into the L section of our block.

I'm going to get rid of this console log saying that we're done waiting, because instead, we're going to return that as part of our resolve handler. Now, we'll go down to our start method here. We'll call wait, provide the parameter. We'll call our .then method. This time, we're going to give it a parameter to pass into a function.

We're going to logout that response. Since this was the successful resolve, that response is actually going to be this text here, "Done Waiting." We'll call our end function. We're going to use the .catch method and it's going to have a parameter called error that goes to its function, which it's just going to logout.

If we go to our bottom console window, we can run this with Node promise.js. We call our wait function, we're waiting, and done waiting, and finished waiting just as before. The exception here now is if I don't provide a number, instead I provide a string to the wait function. When I run that again, it calls the wait function and errors out using the promise reject handler saying that it's not a number.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJavaFacebookTwitter
分页:12
转载请注明
本文标题:js: Convert a callback to a promise
本站链接:http://www.codesec.net/view/534231.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(13)