前端fetch怎么使用

hello， 大家好，这一个小节我们来讲一下使用 fitch 函数来发送 ajax 请求。 这个废纸函数呢，是属于全局对象的，可以直接去断用啊，然后返回的结果呢，是一个 promised 对象，我们来演示一下。 好，谁的话呢，给这个按钮呢，绑定事件，然后点击按钮发送请求，我呢已经提前呢把元素获取到了，下边咱们开始绑事件， b t n 点 on click， 然后等于一个 function 好，发送请求时啊，直接调用 fit 函数，这个 fit 函数呢，接收两个参数，可以看一下，第一个呢是一个 url 啊，第二个呢是一个可选的配置项，注意是个可选的啊，然后呢，第一个参数呢，除了可以写 url 之外呢，还可以写一个 request 对象， 不过呢，这个 request 呢，现在处于一个实验阶段啊，所以说咱们这传 u r l 就 ok 了。然后咱们给这发请求呢，咱们准备呢，再来新建一个服务的路由规则， 然后把这个呢复制一份拿过来放下来，然后 excels 呢，把它换成啊，这个 fitch 服务， okay， 保存。然后这儿呢，咱们换一下，来一个 fitch 式 server。 好，然后呢，来在这块写，写上完整 u l 幺二七点零点零点一，冒号八千斜杠，然后 fitch 杠 server， 这是第一个参数啊，那么第二个参数的话，它是一个对象里边可可能可可以配置的属性。有这些 啊， method， headers 和 body 啊，请求方法，投信息和请求题。好，那么 method， 咱们加一下， 这是请求方法，来一个 pose 的请求方法，然后下边这个呢是请求头， 然后这会来一个 headers， 也是一个对象，然后 name 等于一个 at 硅谷， okay， 然后下边再来一个请求题，请求题这块儿的话，它是一个 body 属性，然后这个见值要注意啊，见值这块儿的话呢，你可以写什么呢？可以写 blog， 可以写 form data， 然后可以写 url search pyramid， pyramids 啊，就说这你可以写这种类型的一些对象，你也可以写呢。什么呀？字符串啊，咱们这呢就演示一下字符串的一个使用，我这写一个 youtube name 等于一个的命，然后按的帕斯 word 等于一个的命。好，我们来看看效果怎 怎么样。点开浏览器，刷新页面，点开 network， 然后点击发送请求，可以看一下啊，透视请求已经发出去，然后请求题这块呢，也已经有结果了，再看一看请求的投信息 啊，请求头 name and 硅谷也存在，那么这样的话呢，我们就把请求发出去了。行，这块可以修改， url 这块也可以修改，你要想配置 url 参数，可以呢，在 url 直接去坠 啊，咱们写一个 vip 等于一个这个十，然后呢刷新页面，然后再来点击看一下 vip 等于十，这个参数可以加上， 这样的话呢，整个请求报文当中任何位置你都可以设置，行头和体都没有问题。好，那么 下边的话，我们来看一看响应，响应呢，咱们说它的返回结果是一个 promised 对象啊，我们需要使用一个认方法来接收和处理它的一个结果。 用认的回调啊，用认的回调来处理结果。好， ctrl log 打印一下 response 保存，切过来，然后点开 ctrl， 然后发创新页面啊，然后点击一下， 看这个结果。有显现状态码，有显现状态支付串，还有呢这个投信息啊都有，然后这个请求，这个响应体， sorry 啊，这个响应体的结果获取啊，看一下， 我们不能够直接这样获取，我们该怎么办呢？我们可以这样来做， return 一下 response， 点 text， 它里边有个方法，点开这儿，点开这儿啊，然后 找一下，找一下这个方法，大家来看一下啊，这个方法的话在这呢啊，在这 啊有一个方法叫 text， ok， 就是它，然后呢我们调一下它，调完它之后呢，咱们再来一个任意方法， 这是 promise 的一个语法啊，在这里边我们使用 ctrl log 来打一下 response 保存，一起来看看这个结果。 点开浏览器刷新页面，点击可以看一下这个接口的话，我们就拿到了，如果说呢服务端返回接口呢，是一个接生，那我们可以呢把这个方法呢换成接生这个方法，他就会把这个数据帮我们解析成一个 gs 对象 啊，刷新页面，点击可以看一下，这是当前我们演示一下使用 fitch 函数呢，来发送啊， jack 请求，那么其实呢，我们在项目当中 使用的 xs 还是居多， fit 的话使用居少啊，不过我们以后的话，在见到 fit 函数之后呢啊，一定要知道这个也可以用来发送啊，价格请求。好，这一个小节我们就先到这。

这个视频继续给大家分享前端的调试技巧，那么现在呢，我有这样一个 bug， 那这个 bug 呢，就是我在发送这个 movie 斜杠 ct 请求的时候， 由于我发送的这个参数不对，然后导致我获取了错误的结果，那么现在我要如何快速的定位到这个请求发起的位置呢？我们就可以使用 x h r 断点，那么我们来到 chrome 的这个 sus 面板，然后在 s o s 面板的这个位置呢，我们可以看到有个 x h r 斜杠 fitch break points 这样一个面板，那么在这呢，我们可以点击这个加号添加一个断点，那么这个断点呢，我们就可以包含刚才这个请求的这个路径， 这个路径也就是 movie 杠 ct 是吧？我们复制过来好这编辑一下，然后添加。哎哦，刚才那已经有了 啊，那，那我们现在就添加了这样一个断点，然后呢一旦这个请求发起，那么这个断点其实就会断在这个位置了，大家可以看我刷新页面之后，然后这个断点就断在这了， 但是呢有一个问题，那我现在看到的这个位置其实是在框架的内部，是经过封装的，那么如何找到我们真正发起请求的原代码的位置呢？那其实肯定是可以的，我们可以通过这个，我们可以通过函数的吊用账，我们往上找， 往上看的话，你基本上就可以看到你项目元旦码对应的位置，比如说这个 ct 点 view 是吧？那么应该元旦码的位置就是就在这，让我们看这个 request data 啊，应该再往上看好就可以看到，那么我们发起请求的位置就在这，是吧？那么我们就找到这个发起请求的位置了，那么这样的话我们就可以回到元旦码里边那 来对这进行修改了。那么除了使用 x h r 断点呢，其实我们也有一个啊，相对来说更加快捷的一个方式，我们来到这个网络面板，网络面板呢我们可以看到 啊，我们可以看到刚才的这个请求，是吧？然后我们点击这个请求，然后在这呢有一个这个 initiator 这样一个面板，我们点开 在这呢也可以看到这个发起这个请求的整个吊用站的情况，在这我们也可以定位到原单码的位置，点进去也就到这个地方了。好，那么今天的分享就到这，如果大家觉得对你有所帮助的话，千万不要忘了点个赞哦。

对，那今天的话我们来学习这个 fetch， 那昨天的话，我们已经学过这个叉 m l h t t p request， 它们两个的作用呢，都是一样的，都是用来跟这个后端的去进行这个交互， 用来发送这个请求啊，什么上传下载呀等等都可以去完成。 fetch 跟这个叉 m l a t v request 呢，它还是有些这个区别的， 比如说这个 fact 呢，它用起来的时候呢，是更加的简单，并且呢更加的直观和更加这个羽翼化。而叉 m l a t b 水快速，它需要写一大坨代码， 而废车的话写起来比较简单，并且呢废车的话现在是一直呢还是在维护的，而叉 m l a t t v request 呢，已经是不再维护了。那废车的缺点是什么呢？那废车缺点呢？他就是没有办法去设置这个超时时间啊，也就是这个胎帽车他没有办法去完成，需要你 自己呢去实现这个 that， 那其次的话，就是这个取消请求的时候，没有这个叉 m l a t b 水快速的方便，他需要基于一个构造函数去完成。好，那废话不多说，我们直接来演示下这个废纸的一个用法啊。 好嘞，各位，那么继续来演示一下这个 fact 的一个用法，那这个道呢，已经提前定好了，其实大家这个时间啊， 好，那第一个八成就是发送这个请求，那第二个就是中断这个请求哦，那第三个的话就是实现一下这个进度条啊，那本章的话一共是有五个知识点， 那第一点和第二点还是演示一下这个常人请求方式，那第三点到第五点的话，这三个呢，实现起来完全跟那个叉 m l a t b 准快死他是完全不一样的，需要我们去这个自己去手动实现。好，那废话不多说，我们直接开始啊， 那这个道母元素呢，我已经是提前定义好了，然后也给他添加了一个事件，点击事件去触发这个 send fight 啊，那么先实现一下这个 get 请求啊， get 请求也是非常简单，这个 fight 的话直接去调用就可以了，他的这个第一个参数呢， 第一个参数呢，就是一个 url， 然后它默认的请求方式呢？它默认请求方式呢，就是一个 get， 它的一个返回值呢，是一个 pro miss。 对，所以说我们这个第一个参数呢，传一个 url， 我们就 http 冒号杠杠这个 local host 三千杠 e p i 杠 t x t。 哦，那这个 u r l 呢，就已经给它放进去了哦，我们说过啊，它的返回执行是一个 pro miss， 所以说我们需要给它点摁呢，去给它接 收一下。好，注意，第一个 r e s 返回的是什么？返回的是一个 face 的一个 response 的一个对象啊，它并不是我们这个真正拿到值的一个结果，我们可以给大家先来看一下。好，我们来刷新一下，好，点击 send fetch。 对，他现在呢只是一个 response 对象，可以看看这个请求呢，有没有成功，比如说这个 stash 为两百，还有这个 o k 为处， 然后呢，你还可以去获取请求图里边的一些信息，甚至呢也可以去读这个流，都可以在这个状态里面去看见。然后呢我们还需要调用它的几个方法，在这个 prototype 里边，比如说返回的格式，那返回的格式呢？一共是有五种，就是我们来看第一种，那第一种就是这个 tik， 也就是返回的是一个什么文本的一个格式，这个是根据后端返回的东西去定义的，比如说后端我们去返回的文本，那我们这接受的话，也就是 text， 后端如果返回的是一个接送对象，那这的话我们就需要 接收这个 jason。 后端如果返回的是一个二禁制流，或者是一个什么图片流，我们就可以通过 blob 或者是 array buffer 的形式呢，去给他去接收一下。 好，那么这个 get 请求呢？它后端呢？返回的是一大坨文本，那么这儿应该使用什么呢？哎，大家肯定都知道，那肯定就是 r e s 点 t x t。 对，所以说我们要指定它返回的一个方式啊， 在第二个点赞呢，才是我们去真正接收的一个值啊。好，我们再来给大家看一下。好，刷新一下， 点击 send fetch。 好，我们先拿到一个 response 对象。好，这时候在等待返回一个整整一个值。哎，我们看可以拿到这个文本了，也是没有问题，是不是比那个叉 m 还有 a d b request 要简单？就这么几行代码就实现了一个 get 请求？好，我们可以来对比一下。 好，那对比完成之后呢？是不是这个 fetch 的方式呢？是非常简单。好，那我们来演示一下这个第二个知识点，就是 发送一个这个 post 请求啊，那这个接口地址的话，就是杠 a p i 杠 post 啊，然后去传入第二个参数，注意，要传入第二个参数，在第二个参数里边可以指定这个请求的一个方式啊， 比如说 masters 请求的方式，这儿的话，我们要变成这个 post， 我们还可以指定这个请求头，比如说 hiders 来一个 content type 为 application jason， 对，这个请求头你就可以自己去定义了，也是没有问题啊。 好，然后传递参数的话，它是有一个 body， 当然这个传递参数呢，也需要去节省点 string fight 去给它序列换一下。对，跟我们那个叉 m l e t p request 的呢，是一样的，那这样的话就可以去发送一个这个 pose 的请求， 然后 post 的请求。我们服务端返回的是什么呢？返回的是个 jason， 这儿的话要改变一下，哎，我们可以先给大家看一下这个 t s t 可以来给大家看一下，我们先看这个 network 啊，点击 send fetch， 我们可以看到湖南返回的是一个接生对象，如果我们用这个 txt 接收呢？他就是一个文本，对，他就是一个文本，所以说这的话，我们需要指定这个 rs 点 jason， 他就直接返回这个接生对象了。好，我们再来点击一下。 哎，我们可以看到，是吧，这时候返回的就是一个接生对象，所以说这个返回的格式呢，需要根据这个后端的东西呢去定义的。然后我们来演示下这个进度条啊。第三个进度条的话，我们还是使用这个盖的请求来演示一下吧，因为这个文本里面这个内容是比较多的，比较方便演示。 好，这的话我们再给它换回去啊，就是 t x t， 然后这个参数呢，我们也都不要了。好，然后这个 response 呢？还是这个 text 好，那怎么去获取这个当前的一个进度和这个总进度 呢？对，我们的这个低个思考的一个问题啊，获取当前的进度和一个总进度，我们看才能算出来一个百分比吧，对吧？哦，获取当前的进度呢？我们需要先获取一个流。好，我们 const 一个 reader， 对，就等于这个 r e s 点 body， 点 get reader， 这个的话就是返回一个流。对，返回一个流啊，你可以把它形容成是一个文章，对，就是我们这个文本呢，它是有一大坨的， 就他呢，一共是有这么多，但是呢，他每次返回来呢，只有一段，你也可以把它理解成是一个切片，对，就是一段一段的去给他返回，然后我们把他每次返回的这个段呢去给他收集一下，然后拼接起来去拿下他， 愣死，然后去给他计算出来，然后呢再去拿下这个总数，去给他除下，就知道当前。哎，比如说这是百分之三十，就给大家去算出来了。所以说我们还需要一个总长度啊，比如说康斯特一个 头头，那这个总长度呢？我们是通过这个 header 的 content lens 的去给它获取的。其实我们可以来先来看一下啊，我们可以先来看一下它这个请求头上面都是有这些信息的，我们点击 send fetch 哦，我们可以看到这儿的话，有 content 认识，就把这个属性呢去给它读出来，这个话是一个总字解，然后呢再去除以当前流的一个认识就可以了。 好，然后我们再加一个 well 循环， 然后来记录一下这个当前流的一个进度啊， 叫 light loaded。 呃，默认是一个零吧。哦，然后怎么去获取当前流的一个进度呢？注意啊，它是一个异部的，我们要使用这个 a wage， 这的话来一个 a sink 好 wait 这个，呃， reader 点 right， 通过这个方法就可以了。好，然后它返回的格式呢？是跟我们这个 generator 以及这个 iterator 是一样的。呃，然后我们直接给它解构一下吧，就是一个 down 跟一个 value。 好，这个档，呃，如果为处 啊，说明结束了啊，如果为 false 啊，说明还有。对，就跟我们这个是，呃， eater rater 跟 generator 去反 和这个格式是一样的，这个 value 就是一个值啊， 返回的一个对 buffer 流，然后我们去读一下它的认识就可以了啊，这的话我们先给它判断一下啊， 防止这个死循环，如果档位处的话，我们就 break 去终止掉这个循环。好，那否则的话我们就记录一下这个流啊，我们使用这个 load 的这儿加等于一个这个 value 点认识就可以了。那这个的话就是一个当前的一个进度啊。 哦，然后，然后我们来获取下这个道路元素啊，然后去给它渲染进去这个 progress 这儿的话，我们就 const progress， 等于这个 document 点 query select progress 啊，然后 progress 点 inner h e， m， l 就等于这个 load 除以这个 total 应该给它放到里边去， 然后是，哎，乘以一百，然后再来一个 two fixed， 保留两个小数，然后再加上一个摆盘号，哎，就完成了。哎，我们来看一下这个进度条啊。好，那这个 return 的话，我们先暂时不 return 啊，我们先来看一下这个进度条是否能够实现点击这个 snowfat， 哎，我们可以看到这个进度条呢，是完全没有问题，但是我们现在拿不到真正的一个结果，那这个结果的话，因为我们这个 response 呢，已经被这个进度条呢给占用了， 所以说我们需要再拷贝一份啊， cons 这一个 response 就等于 r es 点克隆。对，再拷贝一份出来，那这一份留呢？是给我们这个算进度条用的啊，那拷贝出来这一份呢，就是给我们去返回这个值的， 然后我们就这个 response 点 text， 哎，这样的话就可以拿到真正的一个结果了。好，我们再来试一下。好，点击 send fetch 哦，进度条也是没问题啊，哎，值的话也是拿到了，哎，这样的话我们就可以去计算这个进度啊。 好，然后我们来演示一下这个第四个去取消这个请求，那取消这个请求的话，我们需要一个构造函数啊，需要一个构造函数，我们叫这个 about， 就等于你有一个 about control， 对， 需要这个东西呢，去帮我们去接收到这个请求，然后这个 bot 里边呢，它有一个属性啊， 呢叫这个 signal， 然后正好呢对应着这个 about 的 signal 啊，有了这个属性，对应完成之后呢，他就会提供一个 about， 一个方法，然后呢我们就可以把这个请求呢去给他终止掉啊，然后我们来获取下这个元素啊，叫 stop， 这的话再给它加一个吧。呃， const stop， 就等于这个 document 先后下这个元素， 然后 stop 点爱的原的 listener， 去给它加一个试键，然后调用这个 bolt 方法的，就可以它这个中指掉了。好，我们来看一下。好，那我们点击这个 send fetch， 好，点击，然后我们等它有这个进度条之后 点击中断，哎，发现他已经是中断掉了，中断掉的话他就会走这个 reject， 所以说你可以在 reject 里面去处理一些事情，那这个话就是一个中断请求啊。好，还有这个超时，超时的话他是没有这个 time out 参数的，一个设置超时的话，其实我们就可以去 简单的封装一个函数啊，它的原理是什么？它的原理很简单，其实就是通过一个 set time out 去给它计时一下。对，比如说你设置了一个多少多少时间，然后在那个函数里边设置多少时间，然后在这个函数里边去接收一下，比如说设置了五秒钟， 然后五秒钟到期之后呢？其实也是电容这个 abort 呢，去给它去停掉，其实就是简单的去实现了一个自己的封装，简单的去实现了一下这个封装。比如说 const 一个什么 time out、 f n， 是吧？ 就等于一个函数，然后呢把这个去给他放进去，然后这的话来一个时间嘛，比如说等于五秒钟，这其实就是把这玩意去给大家封装一下，然后到期之后呢去调一下这个东西给他终止掉，那这个话就是一个 that 自己去实现。好，我们可以来看一下，可以试试啊， 五秒钟的话可能太长了，然后这个函数直接在这个调用一下吧，三秒钟试试 哦，没有点击。对，我们没有点击这个，然后加到这个 stop 里边，哦，把这个替换一下， 好，点完这个我们就赶紧点这个中断啊。好，我们可以看到是不是他也也就停了，这就三秒钟之后他就自己去给他停掉了，就是通过这个函数自己去封装去实现的。好，那以上的话就是本章所有的知识。

用它到底有多方便呢？今天我们来看一下它到底有多方便。这是它的官方网站啊，它的官方网站是有中文的，所以说这里不需要提供民间中文网，这里啊，你可以点起步，它东西其实不多，东西真的不多，它里边你看一下这个 api， 大家看一下吧，他就是提供这么一个函数叫 access， 里边传出一个对象，对象就是配置，你发送请求，你要配置方法吧？方法为什么？什么？ pose？ 或者是 get？ 或者是一些其他方法？你请求的一个 io 地址是什么， 对吧？你发送的数据，比方透射请求，你要发送一个请求体吧，消息体，那么这个数据是什么？那么这句大概就相当于是啥呢？就相当于是如果说我们用废弃 api 来写的话，就相当于是个废弃，然后呢？优字一二三四五， 对吧？然后第后边我们配置一下请求方法，没事的，为 post。 还有就是数据，数据的话，我们要配置一下黑道的事，然后 content content type 为 application 节省，对吧？这些事情呢？其实，哎， access 呢，都已经给你做了，你不用再配置请求投了。然后呢？消息体 body， 我要用节省 stringy five， 然后把这个对象，把个请求的数据放过去， 他就相当于是我们这这么一段代码，是不是要写起来麻烦一些，对不对？那么用那个 x 的话，那么就非常简单了，就这么几项代码就可以搞定了， 那么这就是 x 的他的呃，封装的一个好处，写一些比较简单。呃，然后呢，他其实还给你提供一些别名啊，就是说你可以使用 ix 小时直接写请求配置， 那么到底有哪些配置你可以参与这请求配置这里他可以有哪些配置？他的配置想非常非常多啊，功能很强大，嗯，然后呢，当然你也可以直接利用他的一些别名，比方说你要发送一个盖子请求，你就点，而一个一个小时就要盖着一个 io 地址，然后呢 先去跟上一些后续的配置。那么一般来说教大家啊，在看那个 api 文档的时候出现那种中货号是什么意思？中货号表示可选的，可以有没，也可以没有有可以传第二个参数，也可以不传，就这么个意思啊，中货号表示可选， 而像 pose 请求的时候呢，我们可以传入一个 u ii 地址，第二个参数呢，传入我们的数据是一个对象，它会自动给你封装成节省格式发出去。然后呢就是地还有一些额外的配置，有写字。

hello 大家好，阿加克斯是利用叉 mlht request 的对象来请用数据的，而 fetch 是 window 的一个方法。 fetch 比阿加克斯有着更方便更好的写法。 fashion 只对网络成就报错对四零零五零零会当做成功的请求， fash 没有办法原声监测请求进度，而阿加斯可以。好的，谢谢大家。