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) // 后台报错返回
})

发起get请求

<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
  methods: {
    getAllFn() {
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res);
      });
      // axios()-原地得到Promise对象
    },
  }
};
</script>

1. 下载axios
2. 导入axios
3. 发送请求
4. 请求方法和请求地址

axios基本使用-全局配置

 

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
    axios({
        url: "/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
    }).then((res) => {
        console.log(res);
    });
    // axios()-原地得到Promise对象
},

axios基本使用-POST发布书籍

<template>
  <div>
    <form action="">
      书名：<input type="text" v-model="bookname" /> 作者<input
        type="text"
        v-model="author"
      />
      出版社<input type="text" v-model="publisher" />
      <!-- 阻止表单的默认行为 不让表单提交 -->
      <button @click.prevent="addBook">提交</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bookname: "",
      author: "",
      publisher: "",
    };
  },
  methods: {
    // 添加图书
    async addBook() {
      const {data} = await axios({ 
        url: "http://www.liulongbin.top:3006/api/addbook",
        method: "post",
        data: {
          bookname: this.bookname,
          author: this.author,
          publisher: this.publisher,
        },
      });
      console.log(data);
    },
  },
  
};
</script>

$nextTick和$refs知识

$refs-获取DOM

<template>
  <div>
    <h1 id="h" ref="myH">获取原生的DOM元素</h1>
  </div>
</template>

<script>
export default {
  mounted () {
    // 获取h1标签这个DOM元素
    console.log(document.getElementById('h'));
    console.log(this.$refs.myH);
  }
}
</script>

可以通过ref和id来获取DOM元素

$refs-获取组件对象

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

components/Child/Demo.vue

<template>
  <div>
    <p>我是Demo组件</p>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log("demo组件内的方法被调用了");
    },
  },
};
</script>

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

<template>
  <div>
    <h1 id="h" ref="myH">获取原生的DOM元素</h1>
    <Demo ref="de"></Demo>
  </div>
</template>

<script>
import Demo from './components/Child/Demo.vue';
export default {
  components: {
    Demo
  },
  mounted() {
    // 获取h1标签这个DOM元素
    console.log(document.getElementById("h"));
    console.log(this.$refs.myH);

    this.$refs.de.fn()
  },
};
</script>

$nextTick使用

vue的DOM更新是异步的

$nextTick 拿到数据更新后的数据 后面跟的是回调函数

<template>
  <div>
    <h1 id="h" ref="myH">获取原生的DOM元素</h1>
    <demo ref="de"></demo>
    <p ref="myp">{{ count }}</p>
    <button @click="btn">加1</button>
  </div>
</template>

<script>
import Demo from "./components/Child/Demo.vue";

export default {
  data() {
    return {
      count: 0,
    };
  },
  components: { Demo },

  // 获取真实DOM
  mounted() {
    // 获取h1标签这个DOM元素
    console.log(document.getElementById("h"));
    console.log(this.$refs.myH);

    this.$refs.de.fn();
  },
  methods: {
    btn() {
      this.count++; //监听数据更新
      // console.log(this.$refs.myp.innerHTML);   0
      // vue更新是异步操作

      //$nextTick拿到数据更新后的数据 
      // 后面是回调函数
      this.$nextTick(() => {
        console.log(this.$refs.myp.innerHTML);
        // 1
      });
    },
  },
  // 拿到数据更新后的数据
  // updated() {
  //   console.log(this.$refs.myp.innerHTML);
  // },
};
</script>