00:00
Hello,大家好,那这一个小节呢,我们接着来做promise的实践练习,这次呢,我们来做一个阿贾克斯操作的封装。首先呢,我们来做一个需求。啊,做一个案例就点击这个按钮呢,发送阿贾克斯请求给谁发呢?咱给这个接口地址去发,来获取一些段子啊这样的信息。好,那么首先的话,我们先来获取按钮,为了方便呢,我们给它加一个ID,等于一个BTN啊在这呢,首先先来获取元素对象。BTN。好,然后把这个选择器BTN放进来。那么现在的话呢,给他绑定事件。啊,单机事件。绑定完之后呢,在里边我们开始做阿贾克斯的啊,四步操作,首先第一步的话是创建对象。
01:00
好,然后XHR等于一个new的h mlhttp request,第二步呢,是做一个初始化XHR.open我们发的请求呢,是get请求给谁发呢?给这个URL地址去发,就是这个接口。好,然后第三步呢,是做一个发送。X h2.3,然后还有一步第四步,第四步的话就是绑定事件处理响应结果。好,里边的话咱们需要做一个判断啊,If X HR点这个ready state等于一个四。下边呢,我们要去判断的是这个响应状态码。如果说状态码呢,是二叉叉。就二开头的状态码表示为成功,如果是其他状态码,我们认定它为失败,所以说我们这呢要判断一下一伏啊XHR点大于等于200,并且XRR点呢小于一个300。
02:08
好,这是一个成功的条件,除了这个之外都为失败,那么成功之后咱们做什么事情呢?啊,咱们把这个结果在控制台输出一下啊,控制台输出响应体。然后呢,如果失败了怎么办呢?控制台输出响应状态码。就是失败的那个响应状态码。好了,那么这个怎么去输出响应体呢?咱们可以使用这个XHR.response。这个属性它里边存的就是响应T,而响应状态码的话。就是这个啊,X h2点。好了,看一看结果怎么样,点开它,顺便打开网络啊,顺便顺便打开这个控制台,点击。好,来看一下,此时已经成功了,我们再来一个失败的,比方说我这少写个一。
03:04
然后咱们再来点击可以看一下,此时就失败了啊,然后呢,这是三十五行,这是一个输出,再看这三十五行输出没有问题,好了,这是当前我们对于之前阿贾克斯步骤的一个编写,那么现在的话,我们要使用promise的方式来实现这个效果,怎么办呢?我们要首先对这个异步的操作进行promise封装。创建promise cost p等于一个new的promise。好了,然后把它包裹起来。包起来之后呢,咱们把代码格式化一下往前推。咱们说了,成功咱要调resolve,失败要调reject,哪是成功?状态码为二叉车的时候为成功,所以在这个时候我们应该是resolve。那么成功的结果是谁呢?响应体,所以咱们把这个响应体传进来。
04:05
那下边的话看一下失败,什么时候失败呢?除了二叉叉之外的响应状态码都是为失败,所以说在这呢,咱们设定啊失败,失败叫谁叫reject,失败的结果呢,是响应状态码,所以说把它放进来。好了,放下来之后呢,下一步咱就可以呢,去通过Z方法对成功和失败的结果来做处理的啊,调用then方法。p.Z。然后就是成功的回调,这个呢是失败的回调。成功的话,咱就直接console log打印一下VALUE6。好,然后呢,下边呢,失败的话,咱们换一个颜色。不拿这个log了,咱们拿一个war区分开,然后来一个reason。好,一起来看看结果怎么样。点开浏览器,然后点击好,你先看这啊,你看这个输出颜色,这是一个黄色,表明咱这个呢已经是失败了,状态码呢为404,然后咱们再来成功的把它呢加上。
05:11
点开再来,你看这是咱们的响应题就来了。好,这是当前呢,我们用promise对阿贾克斯的操作呢,做了一个封装。啊,你其实你会发现就是那个路数啊,把异步任务代码放进来,成功时调resolve,失败时reject,然后顺便把成功和失败的结果呢传进去,然后在Z方法当中指定成功的回调和失成功和失败的回调,然后对结果去进行处理就可以了。好了,那么这个对于阿贾克斯的封装练习,我们就先到这儿。
我来说两句