持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是promise相关知识
- 这是基于我学习的笔记而来的文章
promise
什么是promise呢?
- ES6中一个非常重要和好用的特性就是Promise
- 但是初次接触Promise会一脸懵逼, 这TM是什么东西
- 看看官方或一些文章对它的介绍和用法, 也是一头雾水
- Promise到底是做什么的呢?
- Promise是异步编程的一种解决方案
- 那什么时候我们会来处理异步事件呢?
- 一种很常见的场景应该就是网络请求了
- 我们封装一个网络请求函数,因为不能立即拿到结果, 所以不能像简单的3+4=7一样将结果返回.
- 所以往往我们会传入另外一个函数, 在数据请求成功时, 将数据通过传入的函数回调出去
- 如果只是一个简单的网络请求, 那么这种方案不会给我们带来很大的麻烦
- 但是, 当网络请求非常复杂时就会出现回调地狱
- ok, 我以一个非常夸张的案例来说明
网络请求的回调地狱
-
我们来考虑下面的场景(有夸张的成分):
- 我们需要通过一个url1从服务器加载一个data1, data1中包含了下一个请求的url2
- 我们需要通过data2去除url取出url3, 从服务器加载数据data2, data2中包含了下一个请求的url3
- 我们需要通过data2去除url3, 从服务器加载数据data3, data3中包含了下一个请求的url4
- 发送网络请求url4, 获取最终的数据data4
-
上面的代码有什么问题码?
- 正场情况下, 不会有什么问题, 可以正常运行并且获取我们想要的结果.
- 但是, 这样代码难看而且不容易维护
- 我们更加期望的是一种更加优雅的方式来进行这种异步操作
-
如何做呢?就是使用Promise.
- Promise可以以一种非常优雅的方式来解决这个问题
定时器的异步事件
- 我们先来看看ProMise最基本的语法.
- 这里我们有一个定时器来模拟异步事件:
- 假设下面的data是从网络上1秒后请求的数据
- console.log就是我们处理方式.
- 这是我们过去处理的方式, 我们将它换成Promise代码
- 这个例子会让我们感觉脱裤子放屁, 多此一句
- 首先, 下面的Promise代码明显比上上面的代码看起来还要负载
- 其次, 下面的Promise代码中包含的resolve, reject, then, catch都是些什么东西?
- 我们先不管第一个复杂的问题, 因为这样一个屁大点的程序根本看不出来Promise真正的作用
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于promise的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
