00:00
咱们再来一个例子啊。然后呢,这个例子也需要自定义后函数。那这个例子咱们要做什么事呢?就是。封装发送阿贾克斯请求。当然这个里边我们会用范型来强化类型的检查。那这样啊。咱们还是在之前的例子里边去写。当中。我要把发送阿贾克斯请求的代码放在一个函数里边去写啊,那么我们想。手这块应该是发送。VJF。我们想啊,那我这函数应该怎么写。Xbo deat。来一个方式。小括号大括号。那将来是不是别人调这个函数,可以给我传入要请求的地址,然后我可以帮他发送请求?所以说这个位置应该给我传入一个U,那URL它报错是因为什么?
01:00
他没有指定。的类型是什么?是any类型,那么我们想如果要是一个地址,那就是租串呗,所以说我就给它来一个什么呢。然后咱们这里边儿发送阿尔格斯请求用的是access的方式。所以说我上边应该去引入X啊。呃,咋办呢?这得先装上呗。NTM install a xls回车。先让他装着啊,装着之后,然后我们来想。这里边儿将来我实现的效果是什么样的啊,我一定用那个函数可以帮我发送请求。当我这个页面一加载的时候。默认啊,这个位置显示正在加载中。然后呢,等到请求成功了,它就会显示我请求之后回来的数据。如果说要是请求失败了,诶,那这块就显示错误信息。所以说这种情况来看的话,我做件什么事呢。我应该给他返回去一个对象,对象里边都是响应式的数据,并且应该有加载的状态,成功的数据或者是错误的消息。
02:09
再来一个date,再来一什么呢?E。那我现在没有这个数据啊,所以说我应该先有数据吧,那这个是一个。加载的状态。一个的load loading等于if的方式,默认呢,它就是处呗,显示正在加载中啊。他应该再来一个count date等于ref默认的没有数据请求没有数据。所以说就是那。再给他来一个erro msg,默认呢,没有错误消息,没有错误消息呢,就给他一个空串。它存储的是请求成功的数据。然后呢,这个位置就是错误信息呗。那我要用到ref,还要用到X,那就都引入啊。啊,上面if已经引入了,那就引入。Al,这是X。
03:05
别人在外边调这个函数了,我地址了,我要帮他发送请求吧,所以说。那就来一个什么呢?X点二。Get里边传出地址,点赞。It Bo。然后点KE。到这就说明成功了呗,成功那就改变什么,改变加载状态。啊,成功了,改变加载状态,那就是loading.value因为ref的方式等于很。啊,当然,如果失败了,我是不是也要改变下载状态吧,我说。那成功之后,我应该拿到成功的数据啊。点Y就应该等于什么。With,放点。那如果要是出错了呢?那他的ER or message?
04:00
MG。点Y6应该等于什么e or点?如果没有的话,那就给他来一个未知错误。那么当前咱们这个函数。但是这有坑啊。因为当年我给他一个nu,所以说当年这个date应该是属于none的类型。啊,将来我要是请求成功了,得到的对象啊,或者数组啊,它的对象的啊,它的这个呃,数据类型应该发生变化啊。但姐,咱们先放在这。那我APP里边怎么做。上下边的这个柚子你看。使用呗。发送请求。发送请求。我要里边的loading,还有里边的贝塔,还有里边的E。Ero msg。等于柚子request里边传入一个地址。
05:04
踩在地下。呃,它我们得到的是这什么呢?获取对象数据。那这个里边要获取的是数组数据。上边这个,下边这我先注释掉一个啊。Loading最重要。因为我要去搭建界面嘛。界面里边有这样的效果。嗯,所以说呢,我在这儿。来一个H2吧。嗯,显示的是正在加载中。那我什么情况显示正在加中啊,肯定是当前的这个加载状态嘛,为处的时候呗,是不是。所以说我用了一个V-A法,那正在加载中,如果消失了呢,就说明定为false了呗,那就应该可能是。出错了,或者是成功了。
06:05
二。那如果说也成功了,也没有错误消息,那这个时候我要想显示数据,我就来一个。V杠二。Li乘以个三。呃,先放在这儿吧,现在我还没有数据呢,是不是。实际上呢,是这样的,我在public目录当中准备了一个date。Data里边有两个JS文件的数据。第一个文件返回来是对象,里面有ID address和有distance,一个是数字类型,两个是字符串的项。还有一个products叫,里边是一个数组,返回来的数组当中有两个项信息。两个字串啊,一个数字类型。现在啊,我如果不通过代码。方式,我想发送请求获取这些数据怎么办?哎,那我这个时候可以在上边儿啊。
07:03
啊,斜线ABB。这一回车。大家看一下,返回了一个对象信息,没有问题啊。Pros点。这一回车看一下,有一个数组里边有两个对象信息啊,那我是提前呢,把这两个数据给大家准备好了。现在呢,我们就去用呗,那我第一个比如说在这儿。我昨晚写的是。贝下边的a res.je。啊,那如果要是这种情况啊,JN格式的文件当中有一个ID,有一个address,它有一个我要用显示出来。那所以说在这啊,应该有个ID。他应该有一个什么呢。这个是ad。还有一个。那我就直接从date里边取了啊。Date里边的ID。还有date里边的什么呢,Ad?
08:02
还有里边的。来看效果啊。打开界面。我们。有ID,有地址,还有距离。那我现在要想访问数组当中的数据,那我把上边这个呢复制一下。这个里边呢,我就填。斜线date下边的pros。啊,那这个数据呢,是一个数组数据,数组数据里边有两个对象,ID title price,我也要在上面显出来啊。那我这么做吧。1234这个是数组数。所以说我在这来一个HR。然后下边再来一个U尾号。然后来一个微光号吧,因为里边有两个对象的数据嘛。
09:00
所以说我这边来一个item。K呢,那就从这个艾特木的。里边的l Li呢,还是应该有三个的。好回车,第一个仍然是ID。第二个是title。第三个应该是price。ERICE。Title当中。那就是点ID。刷保存啊,我们来看。信息。刷新,大家可以看一下下边信息,可以正常显示。好,但是我的问题来了呀。比如说啊这个问题我想监视,我想监视data这个数据。把这个data数据的length显示出来,那我该怎么写?啊,监视啊。那就是watc是呗。
10:00
我想见识贝。然后呢,直接o.log括号。date.value.less。大家注意了啊,这个对,这个报是报错了,因为没有引入嘛,那就引入一下呗。因为当前这个Y6是I类型。我还真希望它是一个数组类型,那我怎么考虑这个问题,我怎么解决这个问题呢?是不是?那无非就是我要想办法让这个date变成一个数组类型的。我考虑到这个问题了,说数对,将来是一个数组了。和date将来有没有可能是对象呢?是不是上面这个请求返回来的就是对象数据吧?所以说。这里边有点小问题,我这个date现在应该是属于个nu,我给它传一个是nu,默认应该是属于not。那到底是一个数组还是一个对象呢?取决于什么呢?我不确定,我不确定这个date里边以后存的到底是什么类型的数据。
11:10
那我这个位置就放一个。将来你调用函数的时候,给我传对象,那就是对象数据,传数组就是数组数据呗。好,但是报错了。因为当写T之后呢,这个钠。和T可以使用与无关任意的险。那么也就是说类型那样的参数不能复制给类型T的参数,那咋办呢?诶。这个时候我们是不是可以让他有一个选择性的。解决了这个问题,但是还没有解决我data.value的问题。所以说将来我应该很明确的得到这个位置,应该是一个数数数组对吧,上面是一个对象。我在这个位置可不可以做一个判断啊,注意啊,现在不是date.value是。是烂字报错了。请看拉,为什么报错?找不到,他当年不知道它到底是什么类型,是不是。
12:00
贝塔点value。如果存在是吧,那我就再把它乱子给它显示出来。在这里边也有问题啊。因为我现在这边已经用到了泛型的方针,所以说将来你用数组的时候这个位置。使用判刑。包括你上面这个位置就给我使用换线。如果是对象,我怎么来限制这个对象的类型呢?好,我们再来看一下address address里边有ID address和我,如果想要约束或者限制当前这个对象的类型,我是不是可以使用接口吧?所以说我在这个位置这么写。啊,接口。定义接口干嘛呢?约束这个对象的类型。Interface里边I。里边应该有ID什么类型?里边应该有什么呢?
13:08
它应该是一个竖块的。包括上面这个应该也是一个组块体。同样的,下边这个我再定义一个接口。只不过这个名字叫I什么的。PRP。那这里边应该有什么呢?有ID title。他应该有一个快。应该是两个字母算一个数字。两个字符串。这应该是一个数字。但是这个位置应该是一个数组,所以说应该给他。但是下边又给我们爆出了很多的这个。ES一般检查的错误,他说什么意思呢?
14:00
所以你这个里边不应该用I开头。因为ES病的检查啊,我没有关闭。所以说我只能把这块改了。啊,它还有这个ES语法检查的问题啊。这个很恶心。啊,因为什么,因为我这儿没有加分号。要不然就把这个ES的语法检查给关掉啊。大家现在可以看一下,这不正常了吧。而且数超重有两个。刚刚咱们讲的什么,又自己定义了一个户口。而且封装了发送阿尔克斯请求了。并且利用了TS型强化了这个类型的检查。也解决了这个问题啊。好,那这块呢,咱们就先到。
我来说两句