24_尚硅谷_ajax请求_使用axios.avi原创

大家关一下啊，我们来看下一个。嗯。呃，下一部分呢，是想说的是我们在react的项目里面如何来发送请求。啊，这里面首先有一个前置的说明啊，这说明想说明一个什么事了，想说明这个red本身。它并不包含发送请求的代码。大家知道我们以前学的块有没有发送价请求代码？有。他是不是做了封装啊，啊，但是没有。那没有怎么办？那没有我就只能去使用是不是原生的或者是第三方的库啊，啊好，那一般呢，工作中肯定不会用原生的。那选择第三方库，我选择什么呢？啊。那我能不能选择去快乐呢？

不太好。啊，为什么呢？因为这块里面确实是包含了的代码，但是那只是他整个库的什么，很小很小的一部分。那你为了能够得到请求的代码啊，功能代码，你把这块引入进来，这个得不偿失。那我们应该用一些什么呢？专门的发送请求的一些库，譬如说这个。啊，这个单词不太好读。加access。嗯。好，它是一个轻量级的啊，说白了就相对而言呢，任何东西相对而言可以进行请求的一个代码，它包装的是什么呢。插曼HP request对象。其实就是简化代码。啊，它的风格就是一个什么呢？Promise风格的，记得知道promise风格大概会有一个什么样的结构吗？

我就记住了一个方法，叫点任。只要看到这哥们。啊，那就是一个风格了。还记得吧，就有一个pro对象是吧？啊pro对象是不是有一个方法叫点认，应该还有一个叫点开吧。补货没学是吗？啊，很简单啊。啊，没关系啊。好，还有一个特点啊，还有一个特点啊。它既可以啊使用在浏览器端，也可以用在load的服务器端。啊，这是它的一个优势啊，如果我们写服务串代码，那我们要发送请求的也可以用access。好，后面我们做的项目既要写前台的项目代码，又要写后台的代码。

啊，也就是说大家去写load代码，写express，写故事。啊，估计大家都忘了差不多了吧，啊，忘了就好啊，忘了忘了才需要我啊，你要忘什么都忘，还需要我干嘛呢？啊。这是这样一个啊，这样一个库啊，那其实还有一种，除了access还有一种方式叫。那泛起来跟access不一样，我们是封装的是它，但FA系基本上可以说是原生的。什么叫原生就浏览器里面本来就支持，你来看一下。我随便打开一个页面啊，随便打开一个页面，我在这个控制台。什么意思，这说明什么？说本身就有啊，本身就可以用啊，底层就定义好了这个函数，它是个函数，这个能看的出来。

但是呢，有一个问题。刚才能看得见是因为我的浏览器较新，那老板的一些浏览器呢，它就没有这个。那怎么样兼容老版本的浏览器呢？那你就需要引入一个兼容的库。叫f.GS。啊可以引用它，但是要说明一个事情啊，强调一个是这个fe使用的是它吗。不是。也就是说能够发请求的有两种方式。一种是这个。能不懂啊，一种是他。那基于这个他们H派对象是不是有一些封装啊，譬如我们解牌不是个封装吗？对吧，譬如说我们要将要学的也是一个封装。懂不懂，而这个flash啊，是另外一种发送请求的方式啊，比较新的一种方式，但是呢，老版本的浏览器不支持，我该怎么做呢？

用它其实它的时间非常简单，他就判断一下浏览器是不是内置了这个函数，如果有用，如果没有了，大家觉得怎么办？就切换到这里来。懂不懂就至少要保证你你你不运行出问题嘛。能理解吧，好，行。那最终呢，我们需要去以这么一个效果来去展现一下他们该如何使用啊，这里面呢，有一个图。诶上来了，有个loading能看到吧，最后显示了啊，显示一个什么呢？最受欢迎的一个库是谁？这我我的作用，我是根据一个关键字啊，譬如说我根据这个R这个关键字在给他上去搜。

搜索所有匹配这一个单词的关键字的库，找出什么呢？最受欢迎的一个就说白了，最受欢迎什么？关注量最大的？大家知道，在每个库都有一个概念，叫四大。对吧，星星的数量是多少。大家估计没关注我是吧。有看见过吧？就这个。那么呢啊，你登录以后，你会可以关注任任何的库啊，都可以关注，比如说我们去去搜一下那个找一个啊。对吧，当然你可以根据这个排序。对吧，排序，那排序大家看到啊，这里面就有一个排序的一个顺序，你看这个是不是他还最先。匹配到的还这个这个是国外的一个免费的学习编码的一个网站。

但你肯定不适合，你都看不懂。很正常啊，第二个呢，就是啊，这个关注量是什么啊，86000啊，300多是吧，OK。我就是要去根据我的一个关键字啊，去搜索跟他匹配的受受欢迎的一个啊，网站的一个仓库啊，最终呢，能够去。跳转的这个仓库的一个链接。这能看到吧，啊，这个里面肯定是不是需要有一个接口，能够去访问的查询数据，那这个接口在哪里呢。来我给大家啊，这里面有一个地址。Jake。这个看着名字，首先这个站点是谁提供的。Github giu为谁提供的？

为开发者提供的啊，上面呢，提供了很多的接口，可以访问来去查询它它这个应用上面的一些改版的了。突然间有点不太认识啊，还好啊，这里有。啊，这个里面呢，有一个什么APIV3啊，是一个V3版本的一个一些接口的文档。这有点慢啊。啊，你们呢，提供了很多接口，我们要用它其中的一个接口来进行一个搜索啊。啊，大家知道位置就行了，来我们来看一下。现在我是切换到我们的这个测试的这个应用里面去做这个事啊，因为我们第11个是。来做一下，准备做一下我们刚才的效果，不过先做一些我们能做的，先把我们先能做的做一做，先第一步还是一样，第一个组件，呃，我叫。

叫什么呢？取个名字呀，就叫most大啊，I e po。Report的一个简写，仓库就在这个啊，虽然有点长啊，但见名Z意啊，React里面的component，哎，好像写的有点问题。这什么，嗯，写一个什么render写一个啊，最后要return一个结果是吧？好来，我们先把这个组件先渲染一下组件标签react。嗯，点render渲染这个标签对吧，来去指定一下啊did。

一个战报。能不能看到，好，这里面就要说一说啊，大家看到我这个界面显示是不是有两种情况，一上的时候有个loading对不对，后来得到数据以后，其实loading的过程中，是不是我在请求的过程中啊。能懂吧，我在请求的过程中，最后啊，我得到两个东西，应该是最受仓库的那个名称。能不懂，以及他的那个主页的什么，是不是地址。看到吧，我要得到这两个数据吧。而这两个数据开始有吗？哎哟，这两个应该是我当前应用的什么呢状态。这个能不能懂啊，也就是说我现在啊，现在要去设计什么。

能看到吧啊，初始的状态吗？等于什么啊，OK ree po吧，写详细点，开始是空串或者空是不是都可以还什么。I po URL也是空串是吧？那我是不是在render的时候需要得到他们俩吧？肯定要得来，先得到再说，再来一个。再来一个，等于this state。好，那现在他是不是有可能没有值啊。也就是说有两种情况，一种有值，一种什么没有值，如果说它有值，我是不是应该返回什么呢？没有字啊，那就是for。对吗？是这意思吧，如果他没有值满。没有值的时候，最先我要显示个什么结构。

写成什么loading嘛，那就来一个来个HR搞个大点的，写个什么loading点点点。是不是意思那else了说明什么？有值，那有值我是不是要显示出来啊，显示出来这个里面大家看到load以后是most star。啊，来写一下。也来个HR吧，大点。应该是return是吧，好，这个里面写什么呢？叫Mo特。呃呃，大。啊，一后面是不是一个链接呀，那应该是个什么A标签，A标签是不是要显示个动态文本。人，那不就他吗？对不，这里面是不是应该还有一个ref链接，链接是谁呀？那不就它吗。

是不是概念？但是我们是不是要发请求啊。关键是有几个问题，第一个问题，我在哪去写发请求的代码？是吧，无非就三个阶段，初始化更新，死亡在哪个阶段？啊，你想你希望什么时候，你是不是希望很尽快显示数据。对吗？金额前数据什么时候发比较好啊？你不一上来就要发请求，想看到数据吗？你还更新的时候我随机更新了。应该说你发了请求，得到数据后再更新状态。对吗？也就是说我是不是初始化的时候就希望能看到数据，那你希望看到数据，那你不想一个发请求去吗。

发请求是不是异步的操作？异步的操作在哪里need？但那个不叫完整的说法，应该叫component did mount。在这里面干嘛去发送啊，异步的什么请求对吧。那下一个问题才是我用谁来帮我发？对吗？啊，OK，来，我们先说一下使用啊access吧。那我是不是要先引入，我现在引入了吗？没有再找去哪找来。啊，OK，因为我们现在测试的方式啊，我需要去CDN上去找一找。因为我现在不是那种应用的方式，去写应用的方式，那我就要去下载NPM下载能懂吧，现在不是，现在没必要下载啊找一下。

有吗？有很轻松用最新版本就行对吧。这不是链接吗？跑过来。放在我们这里对吧，哪一个script啊，走哪个他。能看到好，那下面我们是不是就引入它以后就多了一个对象，就叫X。懂不懂，好XS有了它以后，它有两个方法可以用。为什么是两个呢？因发请求有get请求和post的请求。懂不懂好，那我这个地方就有一个问题，我的那个地址是多少，对不对。啊OK，当然你可以从刚才我的这个文档里面去去找啊，其实有很多我们有一个查找的，往下往下看啊。

有一个搜索设，但是我先搜我现在搜索的什么。搜索是仓库啊对吧，所以说选择它，它其实也可以搜索用户看到吗？后面我们要做一个应用搜索用户的。啊，这个非常慢啊，我就来一个，我这里面已经准备好的，有这样一个地址，这是测试接口。看见C。把它放到这里来来啊，这个地方cost。啊，OKUL等于。好，这里面啊，有一个变化的，就它。Q，什么意思？查询关键字，现在我写的四个啊，其实这个可以变吧，可以变啊，当然这个变化你甚至可以在外面传过来都行，对不对啊，我里面就写死的，下面这个大家知道什么意思。

排序sort是排序的意思，根据什么排序能懂吧？这里面根据是不是星星的数量来排序。你觉得它默认什么顺序，你不要跟我说升序，那肯定降，肯定是个降序啊，说白了多的在前面嘛，那用户肯定希望看的多的嘛先。对不好，有了这一个地址以后，哎，我们说过了，它是一个promise的风格，那说明返回的是一个什么方米，对项后面干嘛呢？啊点任呗，是吧，能看到吧，好接着啊啊这里面可以传一个回调函数，我们就叫它啊用这个函数啊大家看到我一个箭头。啊，这样写啊，放到下面来，这太长了，不太好。这是一个成功的回调函数，能够看到啊，这个数据就在response里面。那我怎么样得到里面的数据呢？它里面的数据在这个对象里面属性是固定的。

队长。那我就来一个result，有人说老师你怎么是是对的，我怎么验证它是不是对的？把这个阿姨把这个response给了什么？打印一下不就知道了吗，是不是。能看到吧，啊，接着我们来去看一看我们当前的妯娌啊，应该一直在写字楼里是吧？没改了，看一下。啊。这个地方是不是response is not DeFine，没有什么，没有出问题了，就少了一个什么？Response，他了S是吧，好了吧。嗯，来看一下刷一下。哇，这么慢呢？半天不出来。

Why not？啊。嗯，我怎么样让我的网快一点呢？哎，先看发请求没有啊。发了没有，发了一直还没什么。还没返回啊，就。哎，来了。啊，愁死人了啊。好，来看一下这是response，在response里面是不是有一个什么。还有一些别的相关的信息，对不对，那我们肯定需要这个data，那需要data的哪个数据呢。看的名字你都知道，就是total count是什么意思？匹配的总数量这是多少？3424923这个搜索起来还有点费劲是吧？啊OK，因为我这个关键字写的太少了，我要再加个再加E会应该会快一点，能懂不啊OK。

好，那接着呢，我们要的是第几个了，但是他暂时一次性只给你发送为30个，看到了吧，嗯，OK。用是不是第一个呀，最匹配的是谁。React。那我除了要得到这个名字。还要得到一个东西。啊，得到一个UR地址，那他用的是哪一个呢？我跟大家说一下啊，是一个。嗯，哪个名字会比较好我嗯看一下啊，叫叫什么呀，啊这个。你看它这个不就对应我们的那个库的一个地址吗。在get up上面某一个仓库的地址，它有一个固定的规则，先是react的，那get up的主地址。

能看到吧，接着是哪一个用户创建的哪个仓库。看到这个问题了吗？其实非常简单。好，那我们要取出这个数据展现，我该怎么去做呢？好谢说我要去得到两个数据啊，得到这两个数据啊，也就说我现在找的那个仓库是吧，仓库名，仓库的对象怎么找了。嗯，Result点它不有一个属性叫什么it第几个第零个就下问题呢，也就第一个吧，第一个啊好，那它里面是不是有两个属性我们可以用啊，啊哪两个属性。啊，一个是什么name还记得不，还一个是什么HTML_URL。

这么写可以吗？可以吧，就得了C项嘛，结构嘛。没问题是吧，那接着我要得到数据后，这是相当于得到啊我想要的数据啊，得到数据怎么样得到数据，那下面干嘛更新是吧，状态吧。是吧，怎么一。this.state呗，对吧？来个大框呗，Re po name是多少是吧？R po ul是多少HM？看着吧。嗯，好了，那我的这个就做完了，我们来看一下刷一下啊。要刷一下以后，数据得到以后，他应该会。小时。

这个效果特别特别好。知道吧，就我就就网速有时候慢，它也有好的地方，就是能看到一个更明显的效果。啊开啊，接着我去点啊点的话就会去进入他的主页。没问题吧，没问题。嗯。当然现在我们是发的是get请求，那如果发po是不是一样啊。能看到吧，那get请求我是不是在那个路径里面带参数，那如果我是POS的了。那就是他这么写，大概这么写的，我要把它写一写，大家知道，虽然说现在不是发posts请求啊，要发表征求post，先传一个U为L，再传一个对象，对象里面写的请求体的一些参数的间子对。听到吧，啊，OK，后面我们会用到post请求答案，嗯。