vue学习笔记（六）——axios的使用和$refs和$nextTick使用

一、axios的使用

axios 是一个专门用于发送ajax请求的库

官网: http://www.axios-js.com/

特点

        支持客户端发送Ajax请求

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

        支持Promise相关用法

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

        自动转换JSON数据

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

使用步骤：

        ① 安装 axios 库       

                yarn add axios

        ② 在需要发起请求的 vue 组件中导入

                import axios from 'axios'

        ④ 发起请求

什么是ajax?

        一种前端异步请求后端的技术

ajax原理?

        浏览器window接口的XMLHttpRequest

axios是什么?

        基于原生ajax+Promise技术封装通用于前后端的请求库

1.1 axios使用-获取数据

获取所有图书信息

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

        接口：接口文档

        引入：下载axios，引入后才能使用

axios如何发起一次get请求?

        在method选项配置为true / 也可以默认不写

axios函数调用原地结果是什么?

        是一个Promise对象

如何拿到Promise里ajax的成功或失败的结果?

        then() / catch()

2.2 axios使用-传参

查询图书信息

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

        接口：接口文档

ajax如何给后台传参?

        在url?拼接 – 查询字符串

        在url路径上 – 需要后端特殊处理

        在请求体 / 请求头 传参给后台

axios哪个配置项会把参数自动写到url?后面

        params

2.3 axios使用-发布书籍

新增图书信息

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

        接口：接口文档

post请求方式, 一般在哪里传递数据给后台?

        请求体中

axios哪个选项, 可以把参数自动装入到请求体中?

        data选项

axios默认发给后台请求体数据格式是?

        json字符串格式

2.4 axios全局配置

配置基础地址，统一管理

可以在官网看到axios的很多默认配置

修改请求url / 以后的请求都不用带前缀基地址了 – 运行时, axios的baseURL会自动拼在前

二、 $refs和$nextTick使用

2.1 获取DOM

通过id或ref属性获取原生DOM

在mounted生命周期 – 2种方式获取原生DOM标签

        ①  目标标签 – 添加id / ref

        ②  恰当时机，通过id / 通过ref属性 获取目标标签

3.2 获取组件对象

通过ref属性获取组件对象

        ①  创建Demo组件，写一个方法

        ②   App.vue使用Demo组件，给ref属性-名字随意

        ③  恰当时机，通过ref属性 获取组件对象， 可调用组件对象里方法等

如何获取组件对象呢?

        目标组件添加ref属性

        this.$refs.名字 获取组件对象

拿到组件对象能做什么?

        调用组件里的属性/方法

3.3 Vue-异步更新DOM

点击改data, 获取原生DOM内容

        ①  创建标签显示数据

        假设 count 的初始值为 0

        ②  点击+1，马上获取原生DOM内容 

        点击执行后 count 的值加1，但是输出的结果仍然是 0不是1

原因:

        Vue更新DOM是异步的

3.4 $nextTick使用

等 DOM 更新后，触发此方法里函数体执行

语法：this.$nextTick(函数体)

此时，count的值输出为1

data改变更新DOM是同步还是异步的?

        异步

我们可以在哪里访问到更新后的DOM呢?

        this.$nextTick里的函数体

        updated生命周期钩子函数

3.5 使用场景-输入框聚焦

点击按钮自身隐藏, 出现输入框并马上处于激活状态

注意: 一定要用v-if来写 (保证DOM异步更新前获取不到输入框, 体现$nextTick价值)

<template>
  <div>
    <button v-if="isShow" @click="btn">点击我搜索</button>
    <input type="text" v-else ref="ipt">
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  },
  /**
   * 需求点击按钮之后，出现输入框，并且输入焦点聚焦
   */
  methods: {
    async btn () {
      this.isShow = false
      console.log(this.$refs.ipt) // undefined
      // 原因：data 里面的数据变化之后，更新 dom 是异步的，
      // 输入框还没有挂载到真实的 dom上
      // 解决方案 使用 $nextTick 解决
      // this.$nextTick(() => {
      //   console.log(this.$refs.ipt) // <input type="text">
      //   this.$refs.ipt.focus()
      // })

      // 也可使用 await 取代回调函数，因为 nextTick 函数返回的也是一个 promise 对象
      await this.$nextTick()
      console.log(this.$refs.ipt) // <input type="text">
      this.$refs.ipt.focus()
    }
  }
}
</script>

$nextTick函数原地返回什么?

        Promise对象

如何在JS中主动触发标签的事件呢?

        获取到DOM对象，调用事件方法

3.6 组件name属性使用

组件name可用作注册组件名字

①  组件定义name属性和值

② 注册组件可用上面name的值