day11/下午/225-尚硅谷-尚融宝-axios的整合和基本使用get和$get的区别

那接下来呢，我们来看啊，我们在那当中使用一下xus啊，那正常情况下呢话呢，我们在纳当中呢，可以用完全和我们原来的这个SRB的in一模一样的方式去使用X，但是呢，在next当中呢，它把xus呢又进行了进一步的封装和整合，那么我们使用next自带的这种啊，整合版的这个X呢啊，有的时候开发会更方便一些。那我们打开这个那APP这个目录看一下pat Jason啊之前呢，已经给大家整合进来了这个us，那么它的全名呢，叫艾next JS-X，就是next整合版的这样的一个X啊，它和next的使用呢，更为呃就是呃更为融融融洽一点哈，用起来更方便一些，好然后接下来呢，我们来看一下啊在这里面怎么样去。发送利用阿贾克斯发送远程请求啊首先呢啊，第一个步骤前提呢，是我们的这个X啊已经配置到咱们的这个package当中了，也就是说明呢，我们的as呢，已经下载到这个note modus的这个目录下了，啊就是当前的这个项目下有这个模块，这是第一个步骤，好第二个步骤呢，就是啊我们呢，要把这个ex呢和next呢做一个整合的配置，那怎么配置呢？还是看笔记就可以了，在我们刚才的这个module export啊这个节点下也是next computer JS这个里面啊，这文件里面我们配一个modus这么一个啊配置项，在这个配置项当中呢，直接把刚才啊引入的这个na JS X作为一个模块配置到当前的这个项目下就行，那么当前的这个项目里面呢，就直接可以用X进行一个远程发送了啊，远程这个HTTP请求的一个发送了，那么接下来呢，我们打开那肯。

这个这个S在这个里面配置，刚才咱们看到的这个model。

好就完事了，完事吧，啊，然后接下来就可以用了，那怎么用呢？我们找到一个页面吧，我们发送一个阿贾克斯请求啊。我们找到一个就是地址，这个网上啊有一个啊，有有有这么一个地址，这个地址呢，它是可以跨域请求的，所以我们可以通过我们的服务器呢，给他发阿达克。可以访问到他哈，他是干嘛的呢？就是显示你那个实际的IP地址。就是他可以分析你的那个IP地址啊，你看我这IP那就111.198.224.119是吧？啊，他其实是一个get形式的。这就是一个普通普通的一个盖请求啊，这种普通的盖请求呢，我们完全可以用这个阿贾克斯的形式呢给它啊这个直接调用一下，那这样的话，我就不用自己启动后台服务器，然后就不用自己去，咱们就不用自己去写接口了，那当然咱们现在也有接口，只不过咱们的接口呢，相对来说返回的数据内容比较多，咱们就用这个就返回你自己的IP地址就可以了，那这个怎么用呢？就用埃贾克斯呢，访问这个地址就可以，然后呢，从这个地址当中呢，拿到响应内容啊好，然后呢，我们来看一下，在这个里面，我们先嗯写一下自然。

嗯。主页这块吧，就pages下面这个主页这里面我们呢创建一个坑RI，然后在这个script里面呢，我们呢写一个data data里面呢就定一个IP啊，回头我们取到的这个IP呢，我们就绑定到这个位置啊。然后接下来呢，在页面当中，比如说嗯，您的IP是IP啊，把它绑在这，然后再接下来呢，在下面这个地方，我们页面一加载的时候呢，我就想去拿这个IP this啊，直接用this就行，因为刚才我们已经通过这种方式把整合到我们的啊next这个程序的上下文当中了，所以呢，直接就this就行了，this.dollar a。

啊，然后接下来我注意啊，我这块先有两种用法，一种法是get，一种用法呢是Dollar get，我们先用这种get。然后呢，咱们把刚才的这个远程地址呢，给它复制过来啊，就这样，然后接下来呢，我们就可以直接写邓了，然后这边呢，我们写棒好，然后呢，我可以打印一下这个天收点log with好，然后呢我们来看一下啊。

啊，就是先看一看这个response有没有打印出来。啊，那我们这面访问一下首页哈，然后F12一下，然后看一下看，先把这个清一下，我重新访问一下。好，这样的话大家看啊，在network这个地方，我们看XHR啊，就已经访问了这个远程的地址，对吧？啊，发起了一个远程调用，然后接下来呢，在cancel这个地方，这面其实就打印了我们的response，结果那它这个远程调用的这个啊response呢，它返回的是一个标准的HTP对象，这个标准的HTTP对象里面呢，有什么head c request呀，Status呀，Status test，这都是标准的HTP有的啊，还有conig，这也是，那另外呢，还有一个data data里面呢，就返回了我们的IP地址，所以呢，在这面我们要想给IP复值的话，就是this.ip等于瑞response.data塔。

好。然后大家看现在呢，我们这个IP呢，就已经展示到我们的页面当中了，所以用这种方式呢，我们就非常方便的发送了一个阿贾克斯请求啊，那这个呢，是。Get get方式好，那么post方式啊什么啊，Delete方式啊，Put方式啊，和这get方式都是一样的道理，我就不一个一个去试了，接下来呢，我们来看另外一个应用就是。Dollar。如果把这个get变成Dollar的话。上面就屏蔽一下，好把这个get呢，上面这个get呢，直接变成Dollar，然后呢，我们打印一下response。看这面哈。

啊，然后呢，这个请求呢，也发送出去了是吧？也发送出去了之后呢，然后呃，结果呢，也拿到了，也拿到了之后呢，然后pencil这块大家看和刚才不一样的呢，就是它打印的直接就是我们要的数据内容，并没有刚才看到的标准的HTTP里边，HTTP响应对象里面的其他几个响应内容，比如说response呀，T呀，Con呀，对不对啊，Status呀，Status test都没有啊，那也就是说如果我们这个地方用的是Dollar get的话，那么这个response返回的就是response data。他在Dollar get内部对这个结果啊进行了一个相当于响应拦截了一下，拦截到了这个结果之后呢，它直接把response.data直接作为response给咱们返回回来了啊，所以呢，这个位置呢，我们平时呢，呃，就是绝大部分情况下呢，就是可以用Dollar get可以简化这个代码的编写，那么如果用Dollar get的话呢，这面我们赋值就直接是this.ip等于response就可以了。

啊，上面的话呢，是IP等于response data对吧，下面这块就直接这样写就可以了啊，然后所以大家看这种方式呢，它就被获取出来了。所以这块呢，是先说一下这个that和Dollar get的一个区别啊。