00:00
大家好,我是学习园地的特约讲师高霍峰,上节课呢,咱们学习了exe中新增加的pro啊,Pro呢在咱们X里边是相当于内置了这个功能,所以呢也是为阿Mo呢做了一个学习的准备,那这节课呢,咱们来看一下阿Mo的一个呃入门应用。那入门应用呢,就是咱们先简单用一下它是干嘛的,了解一下,其实呢,它和阿贾克斯是一样的,那我就不讲它的原理呢,其实你就把它看成是贾克斯的一个变相的一个应用就可以了啊。哎,这里边儿呢,我用这个工具把它创建一个项目,方便我们来,呃创建。创建应用程序,那我们这里边新建一个,新建一个HTM文件,我们叫做DEMO吧。一个简单的一个TM文件在这里边,Script在这里边引入我们的使用,在引入之前呢,它是一个工具,对不对,那我们用NPM呢,可以安装,那我们后边再用,那我们先用一下CDN的方式,如果你不结合框架应用的话,一般我们都用CDN的方式直接引入来,我们打开浏览器,我们呃boot点用boot.cd吧。
01:02
这里边儿找一下啊。X,诶,这一个基因permit Miss atd库对不对?在这里边咱们直接找最小的这个就行,复制标签,然后到我们程序里边,在我们头里边把它引入就行了,这是最简单的一个方式,我们现在也不用外派,也不用NPM,最简单的方式,这样应用就行了。那我们创建了一个文件,这么引用直接引入进来,那我们直接使用AX iOS括号这种方式就可以直接引用了,默认的方式使用盖的方式。默认方使用盖的方式,我们直接在这里边输入URL就行了,那像前边我们输入的呃,输入的接口文件,比如说posman里边,你看我们请求的这样添加的接口对不对,或者是我们请求的这样的一个呃,Get get接口对吧。哪两种方式?对吧,都可以。那如果我在这直接写的一个接口,那我们本地文件域名也得是一样的,你比如说这个是api.edo work.cn,对不对,下边的I,你下边的link不是不行,但是咱们得处理发育的时候解决,那现在为什么把这个文件写在了,你看写在了外B服务器下边,这是他新建那个DEMO对不对,你看写在了这个下边。
02:18
这个下面,那我这块呢,直接请求的接口是哪个呢?那咱们就自己做一个接口,这个先留着。我随便先做一个接口啊,做一个PP文件吧,PP文件咱们就叫API啊。Get为pi.pp随便做一个,然后这里边我什么也不做,简单的输出一个。这是一个test的测试,我现在什么也没做,只是输出了一一条语句,那我们看一下用阿MOS能不能获取这里边的输出,这样的话就是一个异步获取了,对不对?那我们使用HTTP冒号本地log host下的,嗯,Log下边的下边的DEMO点不是啊,Get api.pp。
03:01
先暂时,那么获取临时先用一下,就把我们PP的输出文件当成接口,只要服务器任何的一个输出,当我们请求这个页面的时候,对吧,我们支持UI04请求,那我们如果用浏览器请求就是这样的,你看。就能输入这个,那我们用呃,阿奇请求呢,那就相当于这个返回给我们的阿贾克斯,就是这个阿奇奥。返回给他。那请求之后,请求之后获取的数据怎么获取呢?咱们说了它是内置什么。Promise,那我们直接什么来个字方法就行了,里边is接收一个回调方法在这,当然了,我可以把这个给敲开对不对,怎么去写都行了,然后is.log我们打印一下就可以了,但是现在我们如果直接这么运行还是存在你看。你看好这个域名和端口啊,我们在这写的接口的域名是log host,那端口默认是八零对吧,那如果我这么去访问,右键浏览器打开。比如说打开方式使用这个。
04:01
今天看不出什么F12你看。出现这样的错误,那就是什么跨域的问题,跨域的问题不行,那这种方式不行,因为这个你看域名访问的是C盘下边这个对不对,这种方式不行,那如果我直接在这块使用工具这么打开,你看它也使用了POS,但是端口不一样,对不对,我们默认的是八零端口,同样的提示错误,所以呢,我们要想没有这个错误,一定要是同一个域名,同一个端口,然后host冒号,嗯,Host不用写了,默认八零端口就行了,你看我们使用这个。呀,你看没有错了,返回来是这个数据,你看date的里边数据是这个里边有date的数据,你看里边有很多个数据,你可以点开投信息请求的,对吧,这里边但是其他信息你看什么时候用,现在可能用到状态码状态的文本对不对,你看用的是不是阿贾克斯的那个叉l TB request,你看这里边的一个状态对吧,都在这块。那我们一般的呢,这个是网络请求,我们通常点网络请求,点击这个你看一下看他头信息,你看使用默认使用的带的方法状态码对不对。
05:05
就是这个,然后呢,呃,Hept使用的是application杰森的这样类型。这是我们第一种请求的默认的这样的一个方式,当然默认的方式如果我们需要参数的话,我们也可以在这个后边去加我们的参数,比如说名字等于张三对吧,然后安德福年龄等于,比如说18,十,19对吧。但是我们这块接收的时候,那我们就不用这个了,咱们为了看到效果,我把请求过来,参数再给他直接返回去。那我们就直接如果是get的请求,我们使用到下文get去接收所有的数据,那如果我直接这么输出打印数组,这样NT下线R这样打印数组呢,那肯定不是杰层格式,咱们一般反馈数据,要么杰森格式要插插门格式,对不对,给处理一下,所以我这里边我直接用接son杰森cude把它转换成一个杰森格式。因为我用的工具不是ppto嘛,所以它没有提示icon,直接输出就行了,这样输出就是一个接对象的格式,来,我们现在再刷新一下。
06:08
看一下我们的控制台,你看这个数据类的数据里边,你看有名字张三年龄等于九对不对,那如果我这块只想要他的什么,只想要他的这个数据。点log,那我直接打印谁啊,打印res.datat这个就能获取到我们反过来的接,当然这个接口我们也没取数据库,就直接把数据库我们返回来的啊来我们试一下刷新一下。你看直接就是这个阶层数据很干净,没有别的对吧,这当然是自带这个东西,这个在咱们react里边咱们会使用啊,咱先不介绍,那现在就是看这个阶层的数据,这个值就行了,对吧,我们的名字年龄都给我们获取到了。那这是第一种应用的方式。可以直接传参数就可以了,那我们假如说要稍稍更复杂的一些方式,我们怎么做呢?稍稍更复杂一些方式,我们直接Xbox。
07:02
括号我们在这里边直接用杰森的格式,这样我们就可以,因为这里边只要传一个URL,默认的方法是get,那这里边就直接请求的是URL存参数,这盖的请求是比较简单的这一种方法就可以了,全是用默认的就是什么,如果这样的话可以指定,比如说URL默认不指定方法默认就是使用这样的方式,比如说请求的地址我们也是这个。请修地址,然后呢,我们这块一样加上Z。Re ES。乘以个回调方法,用箭头函数模拟对吧?res.log你看是一样的数据,当然了,参数是我们幂传递没传递呢。看一下它默认的数度是零是空的对不对?给我们返回来了,但是没有错误,请求的是这个,那如果我们加参数也是两种办法,一种在后边加上问号A等于111,然后按照符B等于二二乘两个,这样是可以的。看一下这种方式是可以的,你看A和B这样两个参数都有了,那除了这样的存参方式之外,因为这样写里边别人不写的话,默认也是盖的,那我们还可以用PAR。
08:11
嗯,S括号。参数这里边写上username等于,比如说呃,张三对吧,找个对象年龄十岁。然后性别。嗯,随便写一个吧,来你看。刷新一下。看这里边把这两个都接收到了,当然了,我们实际写的时候,你要么用这种方式分摊,要用拼接字符串这个分参二者选其一对不对,咱们平时写的时候你可以这样。嗯,那有的时候有没有些几块那种方法点盖着点pose油,咱们下节课再介绍,包括你看咱们在处理错误的时候,后边你还可以直接什么点catch。CDCH,然后这里边直接接触一个错误信息就行了。我这块先别当展示,我先不加啊,先最简单的先体验一下,咱们先把它的最基本的这样的,呃,语法咱们用一下。
09:03
那你可以显示的通过这种方式指定它的方法,Met hod,因为是阶层格式嘛,这是阶层格式啊,一定要多用逗号分开,那我可以指定比是是GA的方法。干的方法。现在是一样的啊,因为默认就是这种方式,所以你可以不传默认这种方式,我们请求你看。这个可以了,咱们看网络。找一下请求的这个API。你看用钙的方法去请求他得到的这个API,但是后边他都在后边把参数都绑到后边去了。那同样道理,既然有钙的方法,默认是这种默认是钙的方法,这种是钙的方法,那我们现在假如说想换成什么POS的方法,是不是就很容易了?我们保证。把。一下加过来,你看我们只要把这个改成post。你看现在如果我把这个改成post,也用这种参数传,那既然改成posts存了,那我们这边接收的时候是不是一定要倒路下post呀,但是你看我现在不变就用这种POS,能不能给我们获取一样的结果?
10:07
看啊,学习一下。看一下这里边数据,你看一样能够我们获取到这个数据,你看方法这块配置文件这块写URL,这个方法是这个对不对,这里边还可以有头信息,你看投信机使用的是这种对吧。数据信息文本这个。你看这里边儿都给我们传了,我们明明是用post传的,对不对,我们看一下网络是不是post。你看。方法是用的,但是呢,参数给我们加到这来了。是给我们加到这种传递方式,而不是真正的用post的内部的方法传,所以我们用钙的方法这块你可以什么,你可以去接受,对吧,而我现在想接受的是什么呢?是post。那你看我怎么能让他接收不到POS的传递的,就应该用POS的方法接收,对吧,这块改变了,现在用这种,他把这块虽然是POS的传递,POS没真正传数去,它还是借助ul传过去了,而不是用的真正的原子传过去,所以呢,我们得改一下它的类型,什么类型呢?就是用。
11:09
Hard头信息我们改变一下传输的方式,改成POS的传输,然后它就不往后边拼接了,不然的话它也往后边拼接,所以那边才能用get去接收的,那我们看一下这里边这个比较长,我把它剪写到这课件里头,你看。把这个文本类型传输类型换成表单的这种传输类型,表单的传输类型就像我们在这个位置,你看我们做POS传递的时候,Body,对吧,我们是不是得选择这个。才能够把数据传出去,对吧,是一个道理,所以呢,我们在这里边也要把这个投信息给改掉,当然它也是阶层类型对吧,头信息你改多少东西都可以改,因为我们使用的什么。使用的hard头信息里边不光这一个,还有其他头信息,呼吸信息,你只要是能同发送的,都可以在这块把它转变一下,那这回我们再请求一下,你看一下。刷新一下。
12:01
你看先看有没有数据。Get API你说清楚。也有数据。也有数据,那用这种传的时候呢,我们就不能用这个参数传了,用因为用这个参数它就往后边拼接嘛,我们用点ta数据传过去,因为改成这种传输的方式了,那我们就把它改成data,因为用参数它就往这传啊,改成这个用data,这才是真正的posts的传递的一个格式,我再刷新一下。你看数的数据就零了。对吧。现在是传过去了,参数也过去了,你看这块对吧。那过去了,我们再看一下这个网络。这款。那带在API这块POS也传过去了,后边没给我们拼接对吧,所以呢,这样是安全的,无会在参数里边看到了,不会在参数里边看到我传信息了,所以表单的方式我们都这么去传,对不对,那传过去了,为什么我没收到,因为我们现在用get手收不到,对不对,那我这改成post。
13:00
你就可以收到了,那我们这边再来,收到之后再给我们返回回来刷新一下。你看。后台。这里边儿就有数据了一样的对吧。我们想获取这几个数据就可以,这就是我们用什么用post方法去接受数据,一定要记得用头和这个去改,不然的话你这块使用上边这种。参数的形式,它就会在后边拼接,那你用get已经接收,所以呢,改成这种设置个头,再加上用这算,这样的话就不是用什么get的方法去接收了,就得用POS方法接收,就完全形成了一个POS的一个请求的一个方式。啊,这就是我们这节课先简单的一个简单的一个入门,那你了解一下这种方式,Get的方式和发送post的这种方式。对吧。自己做一下实验,当然这样的方式用的不多,那么咱们有像query用的那种方式,简写的方式,对吧,这种得一个一个的去配置对不对,那我们直接可以用点或点post就直接完成点点操作了,好,谢谢大家这。
我来说两句