00:00
好了各位,在上一小节呢,我们用消息订阅与发布机制写了一下这个案例,对吧?那我得赶紧做一件事儿,回到代码当中,停掉我的脚手夹,关掉这文件,SRCCTRLCCTRLV,赶紧把这个给你留下,诶,起个名零六下划线叫做github搜索案例下划线pop subb,哎,就代表着这个案例我是用什么写的呀?Pop subb写的好吧,嗯,每一个都给大家留一下痕迹啊,大家别急,等我把github搜索这个案例啊都讲完了之后呢,我再给大家写笔记是吧,再给大家把这个案例呢形成到这儿,说这个案例敲完了,我们能学到哪些知识来关掉?好说一个细节上的事儿啊,我把脚手架呢重新启动一下啊,N PM start。稍等,等着他打开浏览器啊,稍等好了,打开了之前的关掉控制台,准备好,嗯,说一个细节上的问题啊,就是大家还记得吗?我在打开这个服务器的时候,5000这台服务器的时候,我说同学,如果你访问的是users,那就是把github搜索的真实数据给你了,如果有一天github不理你了,咱是不是可以用这个呀,叫USERS2啊,但是好像还没带着大家看这个USERS2能返回什么样的数据是吧?那我们试一下,同学一定得保证你5000这台服务器是启动的啊,你不启动就没人给你返回东西了,对不对啊,大家还记得不,咱们那个代理啊,可是把请求转发给5000的,完了,你还没5000那台服务器,那肯定不行啊啊来,关掉,找到search,找到搜索的地址,你把这users改成USERS2好了,回到页面看效果,刷一下,你搜索艾特硅谷,然后点击搜索看效果啊,一二三点。
01:51
同学,你发现瞬间东西就回来了,对不对,好像都没有loading那个过程,为什么呢?来说一下,因为这是我写死的,这些数据返回的速度很快的啊,所以说可能你都看不见loading的一个过程啊,说一下这两个人是谁?唯框架的作者游禹锡啊,一个知名的这个博客啊,这个博主啊,阮一峰啊,也出过一些书是吧?啊也有一些这文章啊,也总之就是前端圈里边比较出出名的啊这么两个人好啊,如果说有一天GI upb不理你了,你就悄悄的把它改成二就可以了,那你用这个模拟的接口就有一个问题,就是不管你搜索什么东西,你只要点搜索同学出来的都是这些人,你不管搜索什么,你只要点搜索,你看出来的都是这些人是吧?哎,你要频繁的点搜索,可能就能看到这个,诶loading这个效果对吧?好来,那咱继续同学,接下来呢,我想让大家回忆一个东西,就是你发送一个adjust请求,都有几种方式呢,或者说你可以用。
02:51
哪些东西发出一个adjust请求呢?是吧,我们总结一下来给你换个颜色,用蓝色的写,同学,首先有一个人你必须要知道谁呢?就是叉HR老师,叉HR是谁呀?就是你的window上所带着的那个叉mlhttp request对象,大家应该还记得这个东西,来,我临时往下方写一下啊,就是之前我们用最原始的方式发送adjust请求的时候,第一步你肯定弄出来一个叉HR,然后你得拗一个叉mlhttp request对象对不对?同学,哎,我们简称它的实际对象呢为叉HR同学,这是最原始的一种方式了,对不对?叉h.open点三是吧,然后ready state change监测里的,哎这些东西是吧?内部读取的得是四,状态码得是200就算成功,对吗?如果你听我说这些东西啊,同学跟新知识似的,那就证明啊,你之前的知识有点欠缺了啊,赶紧去。
03:51
补一波来,回头咱们捋顺啊同学,那么第一个呢,已经给大家说了谁呢?是不是叉HR啊,嗯,那么还有别的,如果呢,你按照我们上回谷的教学顺序,叉HR我们给你讲完了,接下来我们给你讲的一定是用这个家伙发请求,就是JA query OK啊j query,那JA query发请求同学有什么优势呢?相比叉HR我问一下大家有什么优势,优势就在于叉HR你得写点open点三的特别麻烦,对吧,拿成功的拿失败的都没有什么特别棒的封装,而且呢,没有那么好用的API j query呢,都给你封装好了,你比如说哎,Dollar符点get对吧,就直接能发送get请求,OK,学的是JA query,但是JA query呢,发请求有一个问题,同学怎么的呢?它可能会产生回调地域,也就是说j query发送adjust请求,它都靠那个回调函数来跟你进行沟通啊,成了就调成功的回调,失败了就调失败的回调,那如果我有这种需求。
04:51
第一次成了再发,第二次,第二次成了再发,第三次,第三次成了再发第四次,同学不用多,我要是五次你就已经形成回到地域了,是吧?啊然后呢,我们又学了一个人,哎叫做谁呢?对吧?用它的优势在哪呢?回调地域能解决,因为它是什么风格的,Promise风格的,OK,哎,所以说同学promise你得过关,前端人员promise你不过关肯定不行,就promise你要是迷迷糊糊的很多的库其实你都用不明白啊,OK,但是啊,我画这么一个图。
05:29
A,这是啥意思呢?我画个箭头指过来,同学,你说这是啥意思呢?无论你学过的JA块RY,还是刚刚哎,我们用的as,同学,我问一下都是对谁的封装啊,嗯,对谁的是不是对叉HR的封装?就说这意思,同学,如果我有这超能力,我让世界上的叉HR不可用了,那么这块也完蛋了,H也完蛋了,因为怎么大它里边都是对叉HR的封装,那么当然了,我补一句,如果在服务器端呢,不是对叉HR的封装,因为服务器端没有叉HR啊,那说老师服务器端的怎么发的请求呢?其实它封装了HTTP是吧?哎,那这呢,咱就不考虑,咱就说前端里边同学,所以说这块RYXS都是对叉HR的封装,那我们为什么不直接用叉HR呢?因为不好用是吧,因为API设计的不是那么的让人舒服啊,而且呢,还没办法解决回调地域这个问题,对不对?同学,那我问你这块需不需要下载呢?需要A设需不需要下载呢?需要同学我想问你无论是这块。
06:29
不是还是as是不是都是第三方组织啊,或者说第三方的这个,呃一些这个怎么说这个公司吧,是吧,啊一些团队吧,是吧,对叉查的一个封装啊,所以说你想用这块必须怎么办,下载,然后再引入as设呢下载引入对吧,哎,那我告诉你啊,同学有一个人他也能发送adjust请求。而且最狠的是他不用叉HR。哎,你注意了,它不用叉HR说老师那个库叫什么名字,它不是一个库内置就有,哎,你的window上已经带着这个人了,这人谁呢?来吧,把他请出来,叫做fetch fe ch fech,你不要把fech和HS和j query把它归到A一个级别上去,不是同学,它和叉HR是并列的,所以说有的时候啊,咱同学可能出去面试,有一些面试官会问大家说,哎,我不借助查HR,能不能发送请求呢?啊家请求呢?啊,大家想一下,诶,那不对呀,这块的A设都是对查HR的封装,那不借助叉HR肯定不行啊,行谁呢?Fech,而且最主要的是同学,它是内置的,知道不?Window上本身就有一个fetch啊,就能让你发请求。
07:48
哦,说老师呢,它的优势在于,优势在于不是第三方库,根本不用下载,直接就用,有浏览器就能用它是吧?啊还有个优势就是这哥们本身也是promise风格的,哎呦,说老师你这么一说,我觉得A的地位好像受到挑战了,你看我用A我还得安装对吧,然后我还得引入,然后再使用,那我为什么这么喜欢as呢?因为它有啊,这个拦截器什么的是吧?啊,他还是promise风格的,能解决回调地域,说老师你这么一说,好家伙啊,有这么一个东西叫做fet啊,不用安装,拿回来就用,而且也是promise风格的,老师那以后就就它了,是吧,接下来你讲完这个fetch啊,那我就用它了,同学,等我讲完你再说,OK,它其实也不是那么的好用,而且呢,现在真实项目开发里边用的也不多啊,Fe ch,我们去有道理呢,搜一下这个词啊,看看它是什么意思啊,Fe ch啊查。
08:48
群它本身就有曲来接来啊,拿这么一个意思发音的叫做fetch啊fetch好了来说老师你不是说这东西都不用下载吗?就直接在浏览器里就能用吗?那你试试呗,Fech fech咋样啊,直接就有对吧?但是你这只能证明说啊有这东西,但这东西怎么用呢?啊,那咱仔细聊聊,回到课件里边,已经给大家准备好了,哎,4.51个扩展啊同学,一个扩展说一下同学fetch这个发请求的方式,有人读fech,有人读fetch,其实也都都一样啊,这无所谓的,同学fetch这种发送请求的方式,就算你不知道,也不耽误你成为一个合格的前端开发工程师,知道吧,当你了解的话,那你可以是一个优秀的前端开发工程师,对不对?好来同学给了大家呢,两个地址,首先看第一个啊,复制打开浏览器。
09:43
粘过来走,呃,稍等,让他慢慢打开着吧,啊,我再把第二个地址呢也拿过来,回到课件里边,把这个拿过来。好,那既然这打开了呢,咱就说说它这个呢,是flash的一个比较官方的文档,告诉你怎么去用啊,其实也挺简单的,只要你用过叉HR,你用过J块,用过as,你看它那就是太简单了,根本不是什么难事儿啊来还有个地址呢,在这。
10:12
哎,是在国内的一个这个交流社区上啊,叫私否私否有人写的这么一个文章,我呢不想看官方的这个文档啊,说的吧,有点太官方了啊,而且呢,让人看起来觉得,呃,怎么讲呢,就是很生疏啊,看起来啊,所以说咱看这个,这人写的比较有意思,所以说咱看这个啊,你看他咋说的啊,同学,他说传统adjust已死,Fech永生是吧,然后再往下你看啊,他上来呢就道歉了,他说原谅我做了一次标题党,Adjust呢不会死,他说什么是传统adjust啊同学,什么叫传统adjust啊,传统adjust值。叉mlhttp request的对象啊,扭出来的那个实例就是叉HR啊,这就是指传统架驶,他说呢,未来呀,会被fech所代替,后来他更新了一下文章,把未来这划了一条线,改成了现在,啥意思呀?呃,就像某个手机品牌的广告,对吧?未来以来是吧?哎,不再是未来了,现在就已经被fe所代替了啊同学这儿呢,你先不要纠结,说老师那人都说代替了,咱是不是得用啊?同学,他说是他说的是吧?哎,来往下,他为了能让自己这个说法立得住脚啊,他说这么一个事儿,说最近阿里把一个千万级PV数据的产品,由JA query的到服点adjust成功的迁移到fech上了,上线一个多月,运行非常稳定,然后结果证明对于IE8以上的浏览器,在生产环境中使用fech是可行的,你注意它的用词,他说fech啊,使用是可行的。
11:50
他没说使用fe只是一个优秀的方案,对吗?他只是说是可行的,OK,好,然后你再往下读吧,他这东西写的就洋洋洒洒,就特别多了,是吧?他在这呢,来了一个这个东西同学,叫做y fech啊,他说为什么要用fech呢?你读一读,他说叉HR啊,是一个设计粗糙的API,你看这人敢不敢说,嗯,他说叉HR是一个计粗糙的API,上来就否定叉HR了,他说叉叉不符合一个原则,啥原则呢?
12:23
叫做关注分离,那我说一下啊同学,这个关注分离吧,其实一是一种程序,呃,设计的模式叫关注分离,什么意思呢?我说一下啊,同学如果说呢,我让你下楼呢,去买一包烟,哎,听我说啊,我说同学呢,你下楼去买一包烟,那同学我想问一下,这个烟买成还是没买成,我是不是就等你,呃,从楼上啊,从楼下上来的时候,你进门的时候,我看你手里有没有烟就得了,对吗?同学我就告诉你去买烟成还是不成,我就等你进门那一刻,我看你手里有没有烟,是不是就得了,哎,那如果说要较真来讲,其实刚才你买烟的那个行为呢,就不符合关注分离。
13:05
说老师那什么叫关注分离呢?那你听我说一下,如果把你买烟这件事儿拆成两件事儿,也就是说首先第一步你得成功的到达楼下的超市对吧?那么第二步呢,哎,你这个现金什么的啊,得够是吧?哎,然后人家那个你要买的烟,还有然后你买烟就成功了,那所以说如果是符合关注分离呢,是这么一个设计,你去买烟了,到了楼下呢,发现超市是开门的,而且呢,呃,你要买这个烟呢,目前也处于在售的状态是吧,而且你兜里的钱也够,那这个时候呢,有一种感觉,你拿着对讲机,你报告了我一声,你说老师这烟呢,我应该是能买成啊,因为我跟超市进行沟通的时候,发现沟通是成功的是吧,然后哎,等你回来的时候,烟你带回来了,同学,这就是属于关注分离,就有一种感觉,要把一个复杂的事儿呢,哎,拆的更详细一点就可以简单的啊,粗略的理解为关注分离。
14:06
啊说老师,那是不是什么事都得关注分离呢?同学,那你觉不觉得什么事如果都关注分离就特别麻烦,复杂的事儿你确实应该去关注分离一下,但是如果要是一个已经很简单的事儿了,你还要硬关注分离,那它就不太合适是吧?哎,这就是关注分离啊,复杂的事啊,拆成一步一步的好了,来同学他开始给你举例子了,他说你看用叉H发送一个请求呢,是这个样子的,首先你有一个叉HR啊,这个实例对象,然后呢,调用open指定发送请求的方式以及地址,然后呢,指定,哎,这个响应数据的格式是Jason的,然后呢,指定成功的回调,指定失败的回调,最终叉HR点三的so是不是发出去了?好,这就是原始的叉HR去实现,那他告诉你,他说使用fetch之后呢,顿时看起来好一点。
15:00
同学说良心话,这儿吧,看起来挺清晰的,他说用了fe之后顿时看起来好一点,我不知道在听视频的各位觉得看到这一堆货的时候,你觉得好一点吗?首先说一下,我刚开始看到这的时候,我没觉得怎么好一点,而且我发现这里边儿它居然用了点Z的链式调用。最后还用了错误穿透,最后用一个catch兜住,所以说同学这段代码呢,同学不是那么好理解的,所以说接下来我讲fech相关的知识,如果您这个知识不过关啊,你这个前序知识不过关,你肯定没法听了,哎,同学,Promise必须要过关啊,好,来,那咱试试啊,咱试一试说老师fetch能发什么请求,就get post put delete这些都能发啊,都能发好了,回到我们的代码当中来,往上滑动这块隐藏隐藏来,同学啊,整体看刚才我用什么法请求啊,用什么是吧,好,我不破坏这些代码,虽然吧,我已经把A发送请求那个版本呢,给你写在这儿了啊,但是呢,我不破坏你这个原来的东西啊,我不破坏它,我给它折叠起来,好,你往下看啊。
16:24
走在这里是吧,啊,虽然已经存一份,但我不破坏的,我把这注释好,这呢来一个说明发送网络请求对吧?来写好了叫做使用发送。好,往下这块呢,给它折叠起来,有的时候啊,它不让你折叠啊,那怎么玩呢?之前跟大家说过是吧,你可以这样写井号region,然后呢,写上你的注释,在下方再来一个井号,选择under region,那这回呢,它就让你折了是吧?好来同学啊,不破坏它,走我再写一段代码,叫发送网络请求,走这回使用什么发送呢?Fetch好使用fetch发送,那来吧,发送咋发呀?啊文档里边呢,它这个里边肯定给大家写了,这个里边官方的文档里边也说了啊,一个是完整版的写法啊,Fech指定URL,然后传一个配置对象,Method的什么携带的参数,什么请求头,对不对,还有一个简单的方式,Fech直接传URL,然后点Z,那我们用这个最简单的形式啊,来找着fe t ch说我不用下载啥的吗?内置就有根本不用下载啊,那这块是不是也得。
17:39
掉啊,因为as设你引入了,但是你没用啊是吧?来走发发请求走起,那往哪发,原来往哪儿发,现在就往哪发,把这整个一堆发请求的地址复制,然后来到这里边走模板字符串哈,来走是不发请求了,第二问,哎走是不是得指定成功的回调和失败的回调啊对吧?成功的响应失败的哎,错误哎或者说失败的原因啊走来同学你说如果能进入第27行这个回调,那什么意思呢?Consolo啊,咱经常这么说叫成功了对吧,你成功了你就把响应给我吗?啊那这呢consolo,那就是说失败了,那失败了你把失败的原因给我嘛,好同学。
18:24
你觉得接下来我发请求的时候,他会走成功还是失败呢?那完全就看你这写的对不对,由于我这儿呢,已经改成USERS2了,同学反应是特别快的,所以说我们观察一下啊,回来脚手架还启动着呢,是吧?嗯,来点击打开之前这些啊,咱都关一关,走走控制台打开啊同学呢,你先别关注这儿说老师页面能不能出效果,你看看你的代码,发完请求之后你没做别的事啊。所以说一会儿你看到的效果就是你点发送它一直处于loading中,因为这loading为true,然后就再也没改过,对吧?我们关注的是控制台输出什么,对不对?哎,好了,来,走着输入艾特硅谷,点击搜索走,你同学成没成功,成功了说老师呢,我觉得这里边就能拿到数据了,同学你说如果你在这里边直接就获取到了服务器给你返回的东西,那我想问的是fetch和as还有区别吗?是吧?哎,来,回头走,首先成功了,那我们打开它返回的这个response响应对象,同学瞪大你的眼睛看吧。
19:34
你看看服务器给你返回的数据在哪儿呢?同学,访问USERS2,他得给我一些用户的信息,对不对,那就一点一点找,老师,用户信息是不是可能在这儿啊,打开,嗯,没有,这儿别找了,这再找找原形上去了是吧?哎,这儿呢,也没有,这是什么呢?也没有OK,哎呦,哎老师这同学觉没觉得现在挺有意思的,你用fetch发了一个请求,他告诉你成功了,但是呢,同学,我发请求的目的是干嘛呀,我是捞数据啊,那数据呢。
20:08
这就有意思了,数据哪去了呢?来同学说一下啊,这个呢,就是fetch所涉及的关注分离思想,你这一块呢,你不能笼统的说成功了还是失败了,同学我加上这么一句话,看你能不能理解啊,我说联系服务器啊成功了,然后我这说呢,联系服务器啊失败了。同学,你找服务器要东西,第一步是不是得先联系一下服务器,哎,这就是他的关注分离思想嘛,你别说发请求,完了我就去了,完我把数据就带给你了,你关注分离一下啥意思呢?你先联系联系服务器,看能不能联系上啊,联系上了然后呢?哎,那我再拿数据是吧?哎,好说老师啊,那刚才也就是可以说是联系服务器成功了,那可不嘛,你看人家告诉你说你请求的呀,是这个地址状态码是200状态的文字是OK的啊,OK也是没错的,你看看这么多一条一条的东西,再告诉你,哥们儿,你真的是联系服务器成功了,所以说刷新一下,当你输入艾特硅谷点击搜索的时候,我只能说你联系服务器成功了,数据呢,你还没取出来呢,是吧,其实啊,同学,现在数据它也给你带回来了,但是他只不过就是不给你,不直接给你啊说老师那联系服务器成功了,那怎么能联系服务器失败呢,对吧,咱都得走一走嘛,怎么能联系服务器失败呢?那你看一下同学。
21:32
我写个USER9,我有USER9吗?我有吗?我没有,好了,那你看效果啊,看跟你想的一不一样,艾特硅谷点击搜索,嘿嘿,同学啥情况呀,他还告诉你联系服务器成功了,说老师那不对呀,服务器都没有这个东西,不能响应这个USERS9,那怎么还联系服务器成功了呢?同学们,你听我说呀,服务器能不能响应这个USERS9和你联系服务器成不成功那是两码事,对吗?你打开这个同学,你发现不再是200了,是404。
22:09
状态文字不再是OK了,叫做not found OK也不再为true了,为false,这啥意思呀?这是代表着我确实联系服务器,联系成功了,但是服务器打了我一巴掌,而且骂了我一句,说404,嘿,就这意思明白不,同学你就比如说啊,你可能有一些男同学啊,最近呢,哎,跟一个自己心仪的女孩在聊天是吧?哎,我就问他,我说同学,你俩进展怎么样啊?他说老师挺好的,天天都聊,其不知天天聊,但是人家可能天天骂你呢,是吧?哎,就说这意思,所以说同学。你觉没觉得,就算你的路径有问题,你只要是能把东西送达给5000 5000返回的状态码是200也好,或者是四开头的什么也好,同学不管怎么的,那你说你为什么能得到状态码呢?我就问你,你为啥能得到状态码,那肯定是因为服务器告诉你状态码了吧,告诉你这东西怎么怎么地了吧,对吧,说老师,那你就告诉我吧,怎么能联系服务器失败呢?由于一些不可抗力的因素,你比如说举个例子啊,同学,我的路径呢,为它改成正确的userr路径是不是正确的呀,但是我断网了,找到network选项卡,找到offline,让整个浏览器离线,整个浏览器都离线了啊,然后这个时候呢,回到控制台,你再搜来找艾特硅谷搜索。
23:32
嗯,联系服务器失败了,而且失败的原因是不能够获取数据是吧?Filed to fetch是吧,不能获取数据,哎,那所以说明白了吧,同学,这一步其实是一个,你可以理解为是一个粗略的这么一个校验,就是到底服务器是否处于活跃状态,我能不能跟服务器建立对话,但是至于说建立对话之后,你是给我数据,你还是骂我,你还是打我,那我不管了,总之你是一个活跃的服务器,我能跟你建立联系,那就算成功是吧?好,那同学聊点别的吧,那你说咱得要数据呀,你告诉我再成功,你数据不给我,那没用啊,你说对吗?那来吧,说说怎么拿数据啊,那要是说到拿数据呢,我就得跟大家多聊一句了。同学,我输出的是不是response呀?那我直接告诉大家,在这个response响应对象的身上呀,它有一个Jason方法啊,写一下叫做点啊Jason其实也不是response自身的,因为你也看到了啊,同学来,我把浏览器呢,让它重。
24:33
进回归正常的网络,然后刷新一下,你看着我搜索艾特硅谷,那你注意看一下啊,呃,回到这儿,我还是正常输出response啊来,那你看一下啊,我输入艾特硅谷,点击搜索,同学,我问一下他身上有点Jason吗?有Jason吗?你输出的就是response,有Jason吗?没有,你打开原型,你看原型是这个啊response的原型对象,然后打开你往下找看没看到一个点Jason方法,哎,同学不要跟那个window里边内置的这个Jason你搞混了,他俩不是一个啊,这个是一个方法Jason,然后呢,你注意看我输出点Jason response.jason啊,输出的是这个好了,那这时候呢,你注意看我刷新一下页面,来走搜索艾特硅谷啊,点击搜索,来同学联系服务器是不是成功了,来你看这是啥?嗯,response.jason同学,我问你返回值是什么?返回值是一个promise实例,说老师那个实例的状态是判定状态的是吗?不是。
25:32
博是我说一下,你想要的数据就隐藏在这个promise实例对象里,联系服务器成功了,如果你获取数据也成功了,那么这个promise实例的状态就变为成功的状态,而且里边保存着你想要的数据,如果说联系服务器成功了,但是获取数据却失败了,那么这个promise实例的状态就是失败的状态,里边保存着失败的原因。哎,那所以说同学你说promise实力对象不是这么玩的吧?啊,Promise实力对象是怎么玩的呀?你想获取一个promise实力对象里的成功的value也好,或者是失败的reason也好,对吧,成功的值和失败的原因你是不是得点then呢?哎,那所以说呢,回到这各老师那这儿我怎么写呢?我在这直接点Z吧同学,不行,那样的话代码就太乱了,你想想你这已经点Z了一次点Z里边成功的回到。
26:32
再点在哪同学,那你就失去promise的意义了,你觉得呢,所以说这儿啊,我们这么做,同学,接下来啊,就看各位的promise功底够不够了,我做这么一件事。同学,谁有返回值,看好了啊,然后咱再回答同学,谁有返回值,是不是点Z所指定的成功的回调有了返回值啊。
27:00
那我想问一下这个返回值会影响什么呢?同学,我问一下为什么你这敢点赞。因为点的左侧就这玩意儿,就蓝色框里的这一堆是个promise实例,你说对不对?好,哎,所以我才敢点Z呢。好同学,不知道你还记不记得promise里边有一个点Z的链是调用,你这是不是点认了一下同学,我问一下这能不能再点了,可不可以,你就告诉我可不可以,必须可以点,是可以链式调用的对吗?好,那你说在这我是不是还能再写一套成功的response和失败的arrow呢?好同学,那你说啊,分析一下,我这是不是写的返回值啊?哎,对,谁有返回值啊,点Z所指定的成功的回调有返回值,而且同学返回值还不是一个一般的人返回值是谁?返回值是一个promise实例对象。如果点Z所指定的成功的回调的返回值是一个promise实例对象,那么就把该实例对象作为整个这个点Z方法的返回值了,这是咱们之前讲promise的时候一个重要的知识点,也就是说点then之所以能链式调用,因为Z的返回值依然是一个promise实例。那么问题来了,那这个点Z所返回的这个promise实例,那到底是成的还是败的呢?那我得看看你成功的回调里边怎么走的,你失败的回调里边怎么走的,那套规则大家还记得吗?我给大家说一下,如果点Z所指定的成功的回调或者是失败的回调,同学不能两个都走,你觉得呢?要么成走这个,要么败走这个,对不对?如果点Z所指定的成功或者失败的回调的返回值。
28:48
是一个非值。那么这个外侧的点Z,它所返回的那个promise实例状态就为成功的,那么值呢就为你返回的非promise值。
29:03
OK,哎,好了,再说第二个规矩,如果你返回的本身就是一个promise值,那么就把这个值作为外侧点Z所返回的那个promise实例的啊值了,如果你这返回的是一个成功的promise实例,而且里边保存的数据是一,那么外边这个点Z所返回的那个promise实例状态就为成功,值就为一,OK。啊,那如果你这儿返回的是一个判定状态的promise实例,那么外侧的点Z呢?那肯定也是一个判定状态的promise实力,也就是初始化状态的,对不对?好,那如果成功的回调里边抛出了异常,它抛异常了,那所以说点then所返回的那个promise失例怎么的状态就为失败的,那么失败的原因呢?就为你所抛出的异常,OK,如果把这忘了,那最好看一下之前的一些知识,好吧,同学,来我问你这我是不是return了response.jason那你说也就意味着啊同学最后说一遍,由于我红色框写了return response.jason那是不是就意味着来我换个颜色,比如说粉色的,那是不是就意味着。
30:26
这个粉色的问它的返回值,那也是个promise实例状态,和我返回这个promise实例状态是一样的,值也和我所返回这个promise实例是一样的,对不对,也就是说你所返回的这个这个红色的promise实例就直接作为点Z所返回的那个promise实例去使用了,直接交给这个点Z了,所以说我是不是可以继续点Z点下去,那我要再点下去,同学,那在这我就可以诶说这句话了,叫做获取数据成功啊了,那如果进入这呢,我就conslo,我就说一句叫做获取数据失败了。
31:10
那成功了,你把数据给我呀,啊可以呀,瑞response,那失败了,你把原因给我呀,可以A对吧?好了,这回我们整体看一下效果啊,回到页面当中刷新我搜索艾特硅谷,注意看走同学联系服务器成功了没成功了,获取数据成功了没成功了,数据呢,这儿呢,瞧IT1堆人的信息是不是回来了,所以说同学体没体会出来他那个关注分离的感觉是吧?哎说老师那讲到这儿就得了,如果要说呀,最粗浅点说,其实讲到这儿也就差不多了,这要大家能明白了,首先呢,你得建立一个这个,这个前提就是说服务器能不能联系上,对吧,哎,先先别聊啊,说服务器给你返回啥了,能不能联系上服务器,能再说下一波,但是接下来呢,我给你写一个东西啊,同学你注意看啊,你猜这是为什么,也是考验一下你这个promise呢,到底过不过关?来,同学,我开始让他断网。
32:11
同学,我是不是断网了,那你看着我在搜索,你注意看啊,注意看啊,特硅谷我还没点搜索呢,同学分析一下,你说我都断网了,还能联系上服务器吗?你告诉我还能能不能联系上服务器了,不能了,那所以说是不是联系服务器失败了,完了是不是说了一个原因啊。这不是我想问你的,我想问你的这玩意儿还走不走对吧?就蓝色的这俩还走不走,走还是不走是吧,走走哪个是说老师呢,连服务器都失败了,那那就你就不能往下聊了,连服务器都失败了,那获取数据肯定失败了,那肯定,那你看一下吧,来123走点搜索同学啊,你看这就有意思了,他告诉你联系服务器失败了啊,获取数据成功了,那数据呢,安de find这是啥呀?为啥啊,为啥呀?同学我问一下啊,刚刚你是不是来到了这个失败的回调,那么这个失败的回调有返回值吗?其实有返回值是什么呢?Unde find,那么同学你返回了unde find,请问unde find是不是属于非promise值?
33:13
And是个promise实例,不是,所以说它是非promise值,那如果你失败的回调返回的是非值,那么这个点Z所返回的promise实例状态就为成功的值,就为and find,对吗?所以说他走了成功,那我想问大家的是,你觉不觉得如果说服务器你这都没联系上,就别提什么数据成功还是失败,因为服务器你都没联系上,对吗?所以说有没有一种感觉,让他到这儿就停下来,别往下走。那么你应该回想到你之前学过一个东西,叫中断promise链,对吗?Return什么呀,一个初始化状态的promise,我为啥非得返回一个初始化状态的promise呀?同学你想一下,我这如果返回一个失败状态的promise,那是不是走这儿了?那同学没有必要再走这儿,因为服务器都没联系成功,你就没有资格再谈说数据怎么怎么地,对吧?那说老师你返回一个成功,那就更可怕了,就返回到这儿了,对不对?所以说我没办法了,我只能返回一个初始化状态的promise实例,他就不往下走了。来,我们用事实说话,网络呢,首先我调到正常,我刷新一下好了,我拿到的是最新的代码,我再让浏览器断网,那接下来我再搜索,你看着艾特硅谷来搜索,走起,怎么样啊,同志们。
34:33
联系服务器失败的就没后文了,这就对了,就别再往下走了,对吧?如果你能联系成,哎,那我们再看一下走位online刷新控制台搜索艾特硅谷,其实搜啥都无所谓了,返回的都是那些数据,对不对?模拟的找同学咋样联系成功,获取成功是不?嗯,这就是用fe发请求,但是你觉不觉得这个代码还有优化的空间,还有优化的空间,同学,我问一下你这是不是指定了一个失败的回调,你这是不是又指定了一个失败的回调啊?同学,那我想问你的是啊。
35:06
对于来说。你如果说点赞成功啊,回调失败回调完了,你再点赞成功回调失败回调,你不觉得这种写法他有点二吗?啊不觉得这种写法有点中二吗?同学,你记不记着promise实例能最后统一处理错误,就没有必要,每一个点都是成功的,也失败的,成功的失败的,你记不记得他能最后统一处理一下子这个错误呀,也就说这儿啊,您别写。这儿啊,你也别写对吧,你再最后给他来一个兜底的人,我就接地气点说同学行吧,兜底的人点点catch对吧?点catch也能指定回调吧,但是他能指定一个对吧?哎,都能来到点catch,你说是不是肯定犯错了呀,那就conslo AR不就得了吗?如果是联系服务器失败了,同学那怎么办?是不是也来到这个K所指定的这个失败的回调是不是执行,那如果是获取数据失败了呢?是不是也来到这儿啊?
36:13
对吧,统一处理错误嘛,那所以说我再问大家,这个是不是其实可以不写是吧?啊,但是我不想在这个代码上再做什么太大的改动了,那接下来呢,我这么做,我这么做,从这儿到这啊,我给你复制一份,然后我把这块呢注掉,哎,这块写一个括号,叫做未优化,哎,未优化那就真得做到未优化的样子呀,啊,那撤回来撤回来啊,我这里边有一些其他的注释,也就是有这种注释啊,那这样我给你写成单行注释,好吧,那就给它写成未优化的样子得了,那这解开这呢解开咱也不统一处理错误了,未优化嘛,对,那所以说从这儿到这儿注掉,然后写一个A括号,这回我就能说了未优化版本是吧,那来再给它优化一下,让代码呢再缩减缩减是吧,哎,叫做优化的,那咋优化呢?诶统一处理错误呗,复制放到这儿。
37:13
统一处理错误,那也就是这儿呢,删了去吧,对吧,这我就敢删了,因为上边给大家留下了嘛,那这儿呢,那也删了去吧,啊,你就只负责指定成功的回调老师,那出问题呢,别怕呀,点开吃走这给他来一个哎,失败的回调是不是就可以了呀?来这是ER or啊,当然我能写的简单一点是吧,箭头函数箭头左侧只有一个参数,所以说可以省略小括号对不对?好,那这里边呢,缩进一下,这里呢也缩进一下,好来吧,那这怎么办?Costlo那咱就直接说呗,请求出错就得了,那具体是什么错误呢?嘿,你问问A吧,这不就结了吗?是吧,哎想想说老师,那我试一下呗,来可以啊,刷新一下啊走输入123搜索,哎,如果哎,由于某种原因,你联系不上服务器了,你再搜索,你看请求出错对吧,就告诉你诶不能够发送flash请求就得了。
38:13
哎,同学,那再优化点呗,你说点then是不是能指定成功的回调和失败的回调?如果有一天你的点Z已经不指定失败的回调了,你还有必要写点then吗?同学,我们好像学过一个人是不是叫做a think与a it?哎,所以说同学我问一下你这一步为啥点赞啊,老师,我想拿到他成功的结果,那我问你这一步为啥点赞啊老师,我想拿到他成功的结果,同学,拿到成功的结果这么复杂吗?拿到成功的结果必须得借助点Z吗?好像也不是吧,来同学。是不是拿两次,它本身是个promise实例,把它成功的东西取出来,取出来之后发现又是一个promise实例,所以说我才点我再取一次,那同学你说白了,我用两个a bit是不是也能办到,哎,来吧,那接下来这些代码瞧着啊,整个从这到这儿不要了,发送请求是不是能得到一个响应,来接收到这个响应对吧?啊,Response,好。
39:16
那同学你这么拿肯定不行,我是不是得it我为一等,哎,我问你是不是就等到了谁呢?这个promise实例成功的结果对吧?那这个promise实例成功的结果是什么呢?啊,同学,那我就问你,你刚才写这点then,哎,这是不是成功了,那成功你所取得的结果,哎,是不是这个东西啊,是不是response.jason呀,啊,那所以说接下来你得怎么做呢。啊,你是取到这个response了,但是你真正想要的是不是response.jason返回的那个pro实例里边所隐藏着的成功的值啊,那所以说怎么办?Response你已经拿到了,是不是还得再等一波啊,Result这才是真正返回的结果,或者说不说result说什么呢?Date数据在等等谁同学,Wait右边一定得写promise实例,你说对不对吧?那所以说谁呀你等谁呀,点Jason,因为response.jason他调用完了,真的是一个promise实例,你在最后给他来一波data,我问你是不是就结了呀?
40:25
你说用就用,不对,你找到离awa最近的一个函数,是不是search啊,加个a think。是,哎,好,回头看效果来到这儿,浏览器切成正常网络状态,刷新,随便搜索点东西走。同学咋样?数据是不是干干净净的回来了?说老师那你要这么写,你好像没有考虑失败的情况啊,也是同学们,我问一下同学,我为他等只能等到啥,我为他只能等到啥,他只能等到成功的结果,异常他管吗?不管,那我问一下你当年用a wait只等成功的结果,那你怎么去处理异常的呢?没记错的话,好像得用这个人吧,是不是叫做try catch啊,把可能出现错误的代码写在TRY里边,一旦它出现错误了,直接来到catch这个里边,而且会带着错误过来,你在这儿直接来一个叫做请求出错逗号啊,逗号呢,写在这儿,然后L是不是就可以了呢?来我们试一下啊,我们试一下在这儿刷新一波,输入123,搜点东西,数据是不是回来了?好,接下来呢,我让他断网。
41:34
Offline好了,这回呢,123啊,再搜索走,同学咋样,请求出错是不是直接来到这儿了,那你看看这种写法怎么的,也比你这种写法要简单吧,哎,这就是优化后的版本,也就是说同学所谓的关注分离啊,就是不在一下子啊,把数据给你就就哎你刚发请求一下子我就把东西给你,不是你不发请求了吗?我先告诉你本次连接成没成,成了你再等我一下,哎,我就把东西给你,哎,就有点关注分离这种感觉了,是吧?同学,哎,那你说那同学如果数据都回来了,那个贝都回来了,你在这干嘛呀啊,当年你干嘛了呀?数据如果回来了,你是不是要做这件事儿,这是成功的吧,放在这儿。
42:17
啊,At硅谷is loading啊,User,哎,这就简单了,同学没有response.data.items了,是不是直接是那个data,就是那个数据吧,那我问一下,如果要失败了呢,原来干什么还干什么,把原来失败的消息发布,再给它粘到这儿来,同学首先先说一下请求出错了,然后呢,拿到这个i.message是不是还是这么做呀?好了,那这回呢,我们整体看一下来到浏览器切成正常网络状态搜索啊,输入艾特硅国,点击搜索走你诶有点小问题啊,他说users.map is not a function哎,这是为什么呢?来吧,咱看看多半啊是你这个data呢,它可能有点小问题啊,那咱这样来,先不发布这消息啊,咱也不发布这个,咱consolo看一眼那个data长什么样啊,来扯回来走consolo data,刚才咱好像看了是吧?啊,再看一下刷新输入艾特硅谷,点击搜索,哎,同学明白了,返回的是个什么呀?啊,返回的是不是一个对象啊,对象里边有it。
43:18
字完了是那个,哎,一堆的那个人对不对,那所以说知道了这解开,那那这解开,那你说这怎么写吧,同学,Data点直接写个it完活对吧?回到页面刷新看效果,输入艾特硅谷,点击搜索走同学,怎么样,东西是不是出来了,OK吧,哎,用废置发请求了吗?用了同学你觉得这种方式怎么样呢?回到刚开始那个人写的文章里边,他告诉你啊,然后得用箭头函数又告诉你啊,得这么的,哎同学你发没发现我刚才写那堆代码呢,跟他所写这个是不是一样的呀,而且你注意他这犯了一个错误,他这忘了写a wait就在这个位置,他忘了写A,你得response.jason response.jason本身就是个promise实例,你把promise实例交给了data,你输出这实例啊,哎,所以说你这会忘了一个东西啊,他这忘写了是吧,哎,他说注意这段代码,如果想运行外边包一个a think函数对不对,哎,咱说了。
44:18
的语句得配合a think函数才能使用,对不对?哎,好了,同学这次用fetch呢,发请求啊同学呢,是这样的,这个fetch发请求啊,大家了解一下即可,这个东西呢,目前使用率不高,说一下啊,原因啊,我先不说说使用率很低啊,我只能说是使用率不高,为什么呢?同学,因为它的兼容性有点小问题,有些老版本的浏览器根本就不支持fetch,有一些老版本的浏览器不支持,所以说呀,同学现在发送网络请求来,你告诉我吧,还是你之前认识那个叉HR吗?就只有他吗?只有他一家独大吗?发出家请求还有一个人谁呀?Fetch回到课件,看看我们怎么给大家总结的来,Fetch的特点就是它是一个原生的函数,不用下载,不用引入,直接就能使啊。还有一个特点,它根本就没有用这个叉HR。
45:17
对吧,他根本就没有用叉HR去发请求,他用的是自己里边的一个东西,OK,所以说以后不要再提架请求,就只知道,哎,就是叉HR没叉HR这次发不了,谁说的fech是不是也能啊,好,那同学呢,看一个细节上的问题回到这,我们再去观察浏览器请求的时候呀,同学你看啊,我把这清掉,我一刷新,这里边呢,包含很多的请求,其中有一个选项叫叉HR,同学你说如果我选到这个选项卡,你说是看什么呢?我如果切到这个选项卡,你告诉我我想看什么,我是不是想看adjust请求,对吧?人那个选项它不叫adjust,它不叫这个,它就叫做叉HR,那你知道为什么它叫叉HR吗?因为在最开始的时候,Fe啊,就刚刚你学的那个人还没有问世的时候,你发送了架子请求,在浏览器里边异步请求也只能借助叉HR了,所以说谷歌浏览器当时在设计选项卡的时候,人家就感觉到了,哎,就是叉HR得了,别的人也发不了架子请求啊,但是我问你同学现在是不是能了谁呢,Fech。
46:20
那你觉得他设计成这个是不是有点不太合理呢?说老师,那他得改一改,人家早改完了,来鼠标放在这悬浮,同学你看人家说的多谦虚,你看他说什么叉HR and fetch,哎,无懈可击,人家说的非常细致,也就是说切到这个选项卡,你不仅能看叉HR发送到加请求,还能看谁呢?Fetch发送的A加请求,同学一句话就是fetch这种发送请求的方式,了解即可啊,在工作岗位上用的概率很低,了解即可,就当有人跟你聊的时候,说除了查一查咱还能不能聊点别的了,也能发一下请求的,告诉他还有一个东西叫做fetch,好啊,那这一小节呢,我们停一下。
我来说两句