Vue学习继续

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

使用之前要 yarn add axios 下载包  在mian.js中引用 

axios全局配置

axios.defaults.baseURL = "地址"

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

$refs-获取DOM 还能获取组件对象

//components文件下创建额外的vue子文件,在app.vue中引用


<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个h1/h1>
  </div>
</template>

<script>

export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }



</script>

<style>

</style>

$nextTick的使用

 为什么要用:Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了

nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题