新手笔记2:普通的回调函数与promise与async的实例

我们知道最初的回调函数形式,是以函数为参数传进去的。废话不多说上马

$.get('/',function(data){console.log(data.length)})

比如这一句,就用jquery里的.get,来看看我们当前**’/’**页面response的数据长度,说白了发送一个get请求嘛
当然可以简写为

$.get('/',data=>{console.log(data.length)})

这两天看见函数就想简写

那我们这种回调函数作用,在promise中是怎么实现的呢?

就用fetch举例吧。

fetch('/').then(res=>{res.text()}).then(data=>{console.log(data.length)})

大括号应该也是可以不写的吧,不过这不是重点。
我们在fetch中获取到’/'页面的response之后,我们要把它转为文本,让then来帮我们做吧。
于是在then中吧res转为res.text()。然后再吧res.text()作为参数传给下一个then
真是斯国一内。

再举一个更加容易理解的例子去对比一下普通回调和Promise的不同之处吧!

我们用setTimeout函数来作示范
settimeout函数使用回调的方法很普通嘛,是把回调当参数而已。如下

/*我就不简写了*/
setTimeout(function(){console.log("我出现了")}, 1000)

看,这个回调函数在1000ms之后才会执行,所以才叫回调。回调回调,回头调用。

那么在promise中是什么样子的呢

为了学习严谨+方便理解,我每一条代码都说说。

new Promise(function(reslove, reject){   /*这里的两个参数呢就是promise中函数的执行结果,对应不同情况*/
	setTimeout(function(){reslove("我出现了")}, 1000)/*正常情况下,我们就传"我出现了"去then里执行回调*/
}).then(function(res){         /*then中传入了res*/
	console.log(res);			/*输出res*/
}).catch(function(err){
	console.log("错误!")    /*catch负责捕获reject的传入*/
})

这里在promise后直接加then是因为这种直接new一个promise的方法是直接运行的,一般不这样用。

promise就到这里,下面康康重头戏!

/*为了代码简洁,我简写了*/
var xinyongka = ()=> new Promise((res,rej)=>{  
	setTimeout(()=>res("人民币"), 1000)
});
async function qb(){
	var chaxun =await xinyongka();
	console.log(chaxun);
}
qb();

我们来讲讲,在第一行我们var一个信用卡变量,这个变量里面装什么呢?装的是一个包含promise的函数,在我们promise中的settimeout函数中我们把人民币传入reslove。然后吧这一整个promise对象给了信用卡。
然后我们又名命了一个异步函数,叫qb钱包。在里面var一个查询变量,装着信用卡,也就是人民币的容器,可理解为reslove,这个await后面可以跟promise对象,会拿到reslove的结果。然后把里面的东西给chaxun
最后,打印查询,可以看到一秒钟之后,打印了人民币。

新手上路,第二次写博客。多多海涵

发布了2 篇原创文章 · 获赞 1 · 访问量 79

猜你喜欢

转载自blog.csdn.net/GANG_1/article/details/104338226