2020/03/17 03-登录接口实现和同步异步调用详解_登录接口使不使用异步-CSDN博客

本文链接：https://blog.csdn.net/qq_42227818/article/details/104930800

安装一定要看到安装的结尾，最后告诉你多少个包安装了，才叫完成，所以npm install/npm i/yarn，都需要安装完成，不然有些包没安装，启动服务就会报错，因为启动的时候包不加载就会出错，必须安装完包。
在这里插入图片描述
**调试的时候，控制台如果出现错误就要思考怎么引起的,控制台是运行时的错误 **

gitbash是按语法检验是否是对的，只要没有语法错误，都可以编译成功

这个窗口必须要看，inline就是打印到窗口里的

在这里插入图片描述
大多数控制台的错误都是你写错了
我们可以用antdesigner改成前端比较好看的

现在启动，不要求后端8000一定启动，代理是有请求才代理，现在没有活，没有请求是没事的
在这里插入图片描述
这一次是用分层的方式，不管写的是不是微服务之类的，代码都需要分层次（我们不可能把代码写到一个componet目录里，src目录里全是js，这样肯定不方便管理，按照道理之前的index和componet也需要放到组件里去，但是太过简单就没放）
service
css，所有的css放在这里。
如果组件太多，就按照业务来分，user相关，博客相关的。现在javascript也提供了模块化的管理，代码需要组织好，模块化的管理就是告诉我们可以用目录来组织好

视图层就是一个个组件，这些组件放到componet里，
服务层放到service目录里，在service里要写XXservice，专门为这个业务提供服务
model专门负责数据，服务端才相当于数据库，如果内容比较多也可以提出来一层

先看看视图层和服务层的交互

在这里插入图片描述
在view层视图上有一个button，一 click就会触发一个事件，在这个事件响应的函数中，需要写一些东西，，比如登录页，一点按钮，就得按照登录框里的邮箱密码拿到之后，需要和后台联系，8000端口的。
在django写login刚好需要邮箱密码，首先拿到email查数据库，查到之后，拿到密码，bcrypt，直接进行checkpw

我们需要解析body里的数据，把email和password提取出来，然后进行验证。我click之后应该调用service层，service层其实就是一个service对象，调用里面的函数，里面会来解决问题。
视图层是组件，组件只解决事件响应，它只管把数据提交到服务端去，由service再发送http，ajax请求
在这里插入图片描述
组件这块需要解决响应事件的问题，然后调用service层login

在service层里写一个user.js

在service层里写一个user.js，是user服务的js，跟业务相关了，这一层不做可视化的问题，所有的可视化都是component react组件。这里只做二传手，将视图层提起的请求到它这边转换成http请求。
也需要导出。
不需要任何可视化的，这是个普通的类，不是组件类，组件要继承自react-component，然后里面写render。
这个就不需要，这个就是一个普通类，就是完成后台或者是django服务器的交互

第一要接收俩个参数
在这里插入图片描述
打印看看能不能最后拿到这两样东西

在这里插入图片描述
回到component的login，这里需要调用，会返回一个新的函数，新的函数就跟onclick捆绑在一起了

写完这个函数，需要拿到邮箱密码，先看看这个target是不是button

闪了一下，是最传统的方式

应该阻止闪，阻止默认行为
在这里插入图片描述
现在不闪了，把默认提交动作阻止了，我们要用异步的提交方式，本页不刷新，后面发起ajax请求，然后通过ajax请求到后端交互，基本不用同步技术。直到验证成功才跳转到登录页

点很多次还是这个东西
在这里插入图片描述
加个这个看看

在这里插入图片描述
form拿到了，里面可以拿到元素

邮箱密码拿到了，form表单通过这样来拿

这样就可以当作数组来用，通过解构的方式把这两个东西提取出来

用解构也可以

下面就是想去调用一个service的login，这里都需要写个东西.为什么service/user不写js后缀，因为在配置文件里帮你加了后缀了
在这里插入图片描述
这样类就创建完了

在这里插入图片描述
表单元素的值就直接拿value，先这么试试

user.js两个波浪线直接就是它
说明调了，我们只要在service做二传手，传到服务器上去，等它回来即可。正常用jQuery也可以，但是现在我们用另一个

我们现在填写默认value，省的每次测试填写，这两个方式都叫写字符串
在这里插入图片描述
这两个值就过去了

在这里插入图片描述
但是这样不好，能否通过外部方式把service注入进来

外部注入对react来讲，应该用props，内部用status。外部用props传进来

这样相当于把原来的包了一层
在这里插入图片描述
包了一层主要是为了传一个属性，谁等于谁就放到了props里去了

下面就可以这么调用，不应该用全局变量，用这种方式来传

通过外部将这个props，给这个组件注入了一个service
在这里插入图片描述
这个servcie就是new service的实例，new service实例就可以调用 login，就需要两个参数

照样拿到了

在这里插入图片描述
用这种方式就有完成一个属性的外部注入，如果以后想要以后使用一些东西，用注入的方式比较方便

实现click函数，就可以调用上面的handleclick

点击页面刷新，说明走的是默认提交方式，本页面不应该这么提交，为了不让他提交就要调用event.preventdefault()，阻止默认提交
在这里插入图片描述
在表单控件里产生了这样的效果的组件，调用完之后.form可以获得form表单，form表单所有管理的组件会放在一个数组当中，所以可以从数组当中去拿，第0个是邮箱，第1个是密码

在这里插入图片描述
准备让service来使用，使用全局变量的方式不太好，所以在使用的情况下，不使用全局变量，应该通过构造器里的属性注入进来。
还可以用props

在这里插入图片描述
叫userservice还是service随便

在这里插入图片描述
数组的第一项和第二项都提交给login

这个代码里没有和后台的交互，view只管接收用户点击事件，然后提起一些请求，但是请求最后变成什么样不关心，这个事情就交给另外的service来管

service就是把你的请求转换成和服务器间的请求，如何找到这个service，最好的方式是通过属性注入的方式，通过props来写，这是react推荐使用的，外部的就用props，内部就用status
在这里插入图片描述
props注入后，就可以调用到service上去了

在这里插入图片描述
下面到service了

在这里插入图片描述
而service想跟后台服务器关联起来

首先需要再确认一点，配置文件里有没有写对

这里的意思是当你发起对3000端口的访问，也就是devserver启动的网站，如果对网站下的数据要进行访问，访问下面的api，就会访问8000后端地址，会将请求转发
在这里插入图片描述
需要用axios异步库

看下官方的怎么做

axios是基于promise实现的，promise是异步，承诺做好事情后来做些事情，这是异步，也就是先执行，后面写then ，catch。then可以处理状态成功的失败的，fullfill的，reject的，catch是捕获错误的，它是基于promise实现异步的东西。可以在浏览器和nodejs，也就是前端和到后端的nodejs中去跑，两头都可以跑。
在这里插入图片描述
有这些功能：
从浏览器中创建xmlhttprequests，利用这个组件发送ajax请求到后端。
还可以从node.js中请求；
支持promise API，因为是基于promise；
拦截请求和响应，因为发的请求，就有可以处理请求和响应；
转换请求数据和响应数据；
取消请求；
自动转换json数据，只要是json格式都可以转换成json对象来使用；
客户端支持防御XSRF，其实就是csrf
在这里插入图片描述
IE8.0以上才支持（嫌弃支持不好，就用jquery的ajax，原生来做），678基本上是灾难，兼容性特别差，8以后，微软就意识到，不兼容会失去浏览器市场，在edge对标准支持非常好

安装npm install

在这里插入图片描述
也可以用cdn加速

在这里插入图片描述
get请求，现在是提交用户名和密码，现在有两种方式，1.把用户名和密码转变成get方法的查询字符串

或者通过post方法来提交

最后都有失败了怎么办成功了怎么办

post也是成功了怎么办，失败了怎么办
在这里插入图片描述
还可以提交多个请求，然后对所有的进行拦截
抄一下这个

先看看能不能拿到，导入axios，这样写法，都是安装在site-packages里了，这个相当于全局包了
这个是全局可以这么用，自己写的就需要用相对
在这里插入图片描述

跑到配置里，发送到8000端口，这是代理的功能，只要是api开头，就会把请求转发给后端8000端口服务器
在这里插入图片描述
现在在前端点一个按钮，就是在表单中提取两个数据，然后两个数据传到这个函数里，这个函数调用后，会发送一个异步请求，就跑到后端

使用试试

后端看下，传过来的数据到底是什么，先发一下数据，看是在body还是在post里
在这里插入图片描述
提交
这里返回404

这里多了个api就不能访问了

在这里插入图片描述

也就是devserver的配置出了问题，把api一起转给你了，没有去掉
在这里插入图片描述
这时候需要用到路径重写功能，rewrite，意思是配置了pathrewrite，将api开头替换成空

配置文件变了，就需要重启

再次提交，400就对了，发的数据不对

是在body里出的数据，post里没有数据，既然数据这么来就可以把body的数据改造成认为ok的东西
在这里插入图片描述

进行改造，前面属性名:后面变量

在这里插入图片描述
再次提交看看

token拿到就成功了

在这里插入图片描述
login这里，click事件结束调用完了，异步调用，调用完立即结束了，这边handleclick不会等你，promise就是执行完了，异步等then，等catch

这边早就结束了，拿数据查询验证都很慢的，要等好几秒，这个函数如果用login，里面基于了promise的axios的请求的话，这个函数一旦执行就立马结束了，就不会再等了，这个调用已经结束了
在这里插入图片描述
这个是异步调用，可以在回调里执行这个问题

测试已经成功了，先注释掉，现在试试做出一种同步的方式

内部的方式是调用这个login之后，只要login不返回就需要一直等着，当我们点击onclick之后调用，这个函数就卡在这里，等着返回
在这里插入图片描述
可以有个返回值，需要刷新，就要变化，render函数刷新，就是state东西，对react来讲最有用的两样东西就是props和state，state变化之后一定引起render函数调用，props有流程。props变化是外部引起的，要多走一个函数，state和props都要经过几个周期函数，然后还要用到show函数，show函数可以return true和false，剩下的函数照着流程走，最后调用render函数。现在没有周期函数，相当于周期函数都通过了，现在state和props变化都会引起render函数的重绘
在这里插入图片描述
下面试试同步调用是什么样子的。
定义state，下面render加一下东西

现在就有这么个值

在这里插入图片描述
这个数据如果是同步调用，要用this.setState,将ret塞进去，setState就变化了

这个函数最后必须return，现在是同步调用，只要函数不返回，另外一边就没办法返回

这里不支持time.sleep，所以写个for死循环，用个t.js测试看看
在这里插入图片描述
单独运行按F8

在这里插入图片描述
写一下死循环试试，这是用时间戳来做的

不用时间戳试试，现在就模拟出time.sleep了

现在是创建一个时间d，然后每次创建时间-创建的时间小于10秒

变量需要加let/var，这里是严格模式

在这里插入图片描述
点了之后,要等响应了才可以继续点页面，同步效果是整页刷新，里面函数不返回你就不能动，异步的调用是立即返回（返回不是最终的结果）
同步效果，只要不返回就一直等着，是不合适的

response打印，点开就看到所有的值了，可以去提取里面的值
在这里插入图片描述
数据会封装在response 的data里，我们写的对象是一个token，一个user

出错的原因是没有做rewrite重写

看下官方

替换重启一下即可

这时候点击onclick就会对service层login函数发起一个调用，如果login要联系后台服务器，这个时候可能会很消耗时间，如果是同步调用的，就会出现页面卡住直到后台返回，用户体验很差

在这里插入图片描述
我们就构建了一个service，提供给root，如果调用handle，使用死循环（来代表同步调用很耗时的话）整个页面就卡住了

在这里插入图片描述
所以用这种方式非常不好，如果时间太长，用户以为死机了，体验很糟糕

所以我们用异步调用，有两种方案，
一种是setTimeout（有问题，1.setTimeout写的函数不能传参；2.setinterval和setTimeout执行N秒后，执行，返回值拿不到，可以帮你延迟多少秒执行，也可以多少秒执行一次）
所以这种方式可以用promise来解决

在这里插入图片描述
在handleclick函数里，调用service里的handle函数就立即返回

这个异步调用立马就返回了，promise，excutive里面两个参数

在这里插入图片描述
下面同步调用去掉

现在如果在页面里调用click，会调用service中的login，传入两个参数后，执行到这里立马promise

而promise对象一启动，立即执行异步操作，继续向下执行，promise不会卡在这里

返回中可以先返回

在这里插入图片描述
这就是在login中，这一句立马执行了，虽然拿到了，但是不是最终结果

没算好就不要这个值了，什么时候好了问promise，promise执行到所谓resolve就好了，什么时候执行完并不知道

这里return也不要了
在这里插入图片描述
state什么时候被修改，不修改就调用不来render，所以就在这里等，但是整个页面不卡死

resolve完了就要操作谁，直接this不行，因为是class userservice的实例

可以传一个this，this就是这个组件

在这里插入图片描述
有了这个组件，就可以通过第三个参数拿过来，就可以在内部使用obj变量

异步调用完成之后，就调用成功的回调函数，回调函数里已经拿到这个对象，通过这个对象修改它的state，而这个state修改之后会引起组件的render，这个组件就变化了
在这里插入图片描述
同步需要一直等着return，现在这家伙执行promise就立即return，这个return就是undefined，立即返回

这边onclick调用也就结束了
这边要等promise resolve或者reject了，才能调用相应的函数

提交就立即返回