00:00
哈喽,大家好,这个小心呢,咱们来使用promise来封装一个阿贾克斯的操作。好了,我们首先先使用原生的阿贾克斯来向一个URL发送一个请求。好,我们这儿呢,就直接来走这个流程了,第一步创建这个对象cost,然后XHR等于个new的xmlhttp request第一步。然后呢,第二步呢,是做一个初始化XHR.open发什么类型请求,发get给谁发请求,我们准备给这个接口地址去发一个请求。好第二步,那么下边呢,第三步是做一个发送XHR.send第四步呢是绑定事件啊,处理这个啊响应结果。
01:01
好,然后呢,绑定X2点,On ready state change等于一个function。在里边呢,我们需要对状态做出一个判断啊判断如果说XHR.ready state要是等于一个四。则证明我们进入了最后一个阶段,所有的响应题都已经回来了啊,在这呢,我们需要判断一下状态码。啊,响应状态码。这个响应状态码呢,它为200到这个300之间啊,就是299之间表示呢是成功的,就是二系列的响应状态里面都视为成功的,所以说咱们这需要做一个判断,If X HR点。啊,Status要是大于等于一个200,并且呢,XHR点要是小于一个300。这里呢,表示成功啊表示。
02:03
成功。那么成功的话,咱们做什么事情呢?咱们是在控制台输出一下这个结果。正常输出Xh2.response。OK,搞定,那么如果说这个结果,哎,大家可以看一下右边已经出现结果了啊,因为咱们这做了live server的一个插件啊,这边只要一保存右边就会出结果,好了先别急啊,如果说失败。然后error用红色的这样一个颜色来去表示XHR,点这个status。好了,大家可以看一下啊,我们把这个呢放大。啊,刷新页面,我们像这个。远端发了一个请求,来看一下这个啊,啊说了这个啊,发了一个请求已经呢过去了,而且结果已经回来了,结果回来之后呢,咱们说了啊,成功以后呢,是要是会在控制台来输出这个响应体结果的。
03:01
啊,没有问题,结果已经回来了啊好,然后呢,失败情况咱们可以演示一个,比如说我们把这个诶写错,大家看一下,这个时候呢,返回结果是一个404,就完全是按照我们的意愿再往前进行的,没有问题,好那下边呢,我们开始使用promise的方式来对这个操作来做一个封装。啊,我们直接在这个代码的基础上去做一个改进,Cost p等于一个new的promise。Resolve reject。好了,那么把这个咱们包起来格式化一下。包起来以后,我们去看一看,什么时候成功,什么时候失败,OK,大家看着啊,这个时候状态码为大于大于200啊,小于大于等于200小于300的时候表示成功,也就是在这啊,然后我们在既然是成功了,我们就要调resolve这个函数来修改promise对象的状态为成功。
04:02
啊,未成功好了,然后呢,如果说要是不在这个范围之内,就表示呢,我失败了,那失败的话呢,咱就用掉这个reject函数。修改promise对象状态为失败。啊为失败,那为失败以后呢,我们就可以调Z方法的第二个回调函数来处理这个结果。好了,我把这个代码呢恢复一下保存。现在你会注意观察右侧啊,并没有任何输出,为什么呢?因为咱们现在并没有为这个promise对象呢,指供指定这个成功和失败的回调啊,成功指定回调。好,p.Z。两个函数value,然后reason。好,如果说你要成功了,成功的话,我们使用cons log的方式来打印一下value,如果失败的话,那咱们使用error的方式来打印一下这个reason。
05:02
OK,搞定看结果成功了啊,你看这结果都已经来了,那咱们再来一个失败的,比如说这一块,哎,失败保存看结果是一个404,我们还可以看看它的一个输出位置,看这是吧,这块是43行啊看一下43行,43行OK,你看这。没有问题啊,没有问题好了,那么你会发现呢,对于我们异步啊,这个成功和失败的一个结果,我们的处理方式呢,跟原来不太一样了。原来是在回到函数里边去操作。啊,你像刚才我们是在回到函数里边来处理这个成功和失败的结果,但是现在呢,你看一下我们是在这个异步任务的后边。哎,通过Z方法来指定回调这个结构看起来会更加的清晰,而且呢,也不会产生回调地域的问题,你比如说拿到结果以后呢,你可能还要再做一些别的事情,什么创建节点啊,然后插入节点啊等等,你会在这儿呢,写这个啊,成功和实成功以后的一个。
06:09
呃,代码,而现在的话,你不用在这儿写这个代码,结构就到此为止,诶很简洁,你要想做这个,想对这个数据做处理,请在后边去做。啊,不会对这个代码呢,产生一个就是过多的一些啊内容的产出,就是把这个代码弄得非常非常长啊,而而且非常非常乱,不会这样子。好了,那么这是当前我们使用promise来封装了一下操作,把它保存一下。
我来说两句