Axios异步调用

promise

• 主要解决异步深层嵌套的问题

• promise 提供了简洁的API 使得异步操作更加容易

1. Promise 基本API

//实例方法
.then()
//得到异步任务正确的结果
.catch()
//获取异常信息
.finally()
//成功与否都会执行（不是正式标准） 

2. axios基本使用

2.1 axios基本使用

axios文档

特点

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

• axios 底层还是原生js实现, 内部通过Promise封装的

axios的基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
    xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

2.2 获取数据

调用文档最后_获取所有图书信息接口

功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

接口: 参考预习资料.md – 接口文档

引入: 下载axios, 引入后才能使用

下载axios:

npm install axios

例子如下: components/UseAxios.vue

​

2.3 传参

调用接口-获取某本书籍信息

功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台

接口: 参考预习资料.md – 接口文档

 例子如下: components/UseAxios.vue

​

2.4 发布书籍

功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

接口: 参考预习资料.md – 接口文档

例子如下: components/UseAxios.vue

​

删除操作：

DeleteByName(byName){
            console.log(byName)
            axios.get('/api/deleteBook/'+this.byName)
            .then((res)=>{
                console.log(res.data.msg)
                if(res.data.code==0){
                    this.getAllFn()
                }else{
                    this.$message.error(res.data.msg);
                }
            });
        }
 
    
    根据名称删除

2.5 全局配置

避免前缀基地址, 暴露在逻辑页面里, 统一设置 ​

3 $nextTick和$refs知识

3.1 $refs-获取DOM

 利用 ref 和 $refs 可以用于获取 dom 元素

通过id / ref, 都可以获取原生DOM标签

components/More.vue

​

​

3.2 $refs-获取组件对象

获取组件对象, 调用组件里方法

ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

components/Child/Demo.vue

​

More.vue - 获取组件对象 - 调用组件方法

​

3.3 $nextTick使用

Vue更新DOM-异步的

点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值

因为DOM更新是异步的

components/Move.vue - 继续新增第三套代码

​

3.4 $nextTick使用场景

点击搜索按钮, 弹出聚焦的输入框, 按钮消失

components/Tick.vue

​

3.5 组件name属性使用

可以用组件的name属性值, 来注册组件名字

组件名可以随便写吗?

封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

components/Com.vue

​

App.vue - 注册和使用

​