Ajax认知

用于异步的.前后端交互. 示例:

Axios初步

axios是一个函数,里面传入了一个对象.然后链式调用: - then:成功回调函数 接收到服务器发送的数据之后,就会调用这个函数.

-catch:失败回调函数 示例: 当然get时传的url可以自己手动拼接数据. post方法则可以传data. params则是在get时,会自动往url的末尾添加哪些参数用的.(当然这一步我们完全可以自动手动拼接url)

注意,上面代码的细节:上面用了两组script标签,这是因为:一个script标签一旦有src属性,那么就不会加载包裹的代码了.因此,我们需要使用两组标签,一组用来src,一组用来存代码.

result是整个http报文.如果我们想要获取数据,使用result.data即可.

简化

其中如果用get,那么就不需要传data/config 另外,上图中,会先输出======,因为这是异步的.

案例:

在刚才的例子里: 1. 由于前面已经数据绑定了,因此输入框里的内容和this.searchForm中的内容是一致的. 2. 这里后端已经约定了发回来的数据是json格式了.并且这些url的格式也是提前预定好的:"如果前端传过来name='a',那么后端就把名字里含a的条目返回过来.gender job同理" 3. 注意empList得提前定义好. 另外,注意我们要的数据实际上就是返回的JSON数组里的data对象,因此我们需要: tip:实际上result本身就是结构化好了的数组,并不是字符串.

当然,清空的时候也要操作: 清空的时候就相当于无条件查询一次.

但是由于是异步的,因此代码执行顺序并不是显示的顺序,从而这样可读性很差,因此就有:

async await

这样,只有result有结果了,才会执行下面的代码. 示例: 注意:

vue生命周期

如果我希望在页面加载完毕后,会自动从服务端获取数据: 在初始化之前:beforeCreate 创建完后:created 挂载到页面之前:beforeMount.所谓挂载,就是把创建的东西挂到DOM树上. 创建完成,接管了页面的指定区域:mounted 数据模型变化时,就会触发更新操作,更新前也就是beforeUpdate,更新后就是updated 销毁前后,分别是beforeUnmount.

所谓钩子,就是不需要我们自己调用,vue会自动调用. 注意是平级的.

示例: 这个方法是最重要的生命周期钩子方法,特别是对后端来说.