浅谈axios,ref,$ref, this.nextTick的使用
一.axios的使用1.作用:axios是一个专门用于发送ajax请求的库,是基于原生ajax+Prmise技术封装通用于前后端的请求库。2.特点:1.支持客户端发送ajax请求2.支持服务端Node.js发送请求3.支持Promise相关的用法4.支持请求和响应的拦截功能5.自动转换JSON数据3.利用axios发送get请求第一步: 下载对应的包npm i axios第二步: 引入要使用的包i
一.axios的使用
1.作用:axios是一个专门用于发送ajax请求的库,是基于原生ajax+Prmise技术封装通用于前后端的请求库。
2.特点:
1.支持客户端发送ajax请求
2.支持服务端Node.js发送请求
3.支持Promise相关的用法
4.支持请求和响应的拦截功能
5.自动转换JSON数据
3.利用axios发送get请求
第一步: 下载对应的包
npm i axios
第二步: 引入要使用的包
import axios from 'axios'
第三步:利用axios发送请求
<template>
<div class="">
<ul>
<li v-for="obj in list " :key="obj.id">{{obj.bookname}}</li>
</ul>
<input type="text" v-model="bookname">
<button @click="fn">发送get请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){return{
bookname:'',
list:[]
}},
name: '',
methods: {
fn(){
// alert('11111111')
axios({
method:'GET',
url:"/api/getbooks",,
params:{bookname:this.bookname}
}).then(res=>this.list=res.data.data)
}
},
}
</script>his.list=res.data.data)
解析:method定义请求的方式,url定义请求的地址,如果需要使用get提交参数采用params,如果采用post提交则使用data进行提交作为配置项提交数据,then()是一个异步的回调函数,来接收响应会来的数据。同理如果采用axios发送post请求则对响应的配置项进行更改,
4.全局的配置项
1.每次在写地址的时候跟路径写起来非常的麻烦,axios提供了解决的方法
axios.defaults.baseURL ="http://www.liulongbin.top:3006"(后面接的是根路径)
同上面的代码把根路径变成一个全局配置项,这样就不用每次去写了,如果以后地址要更改也方便进行跟换。
二.ref的使用
1.作用:利用ref可以获取到dom的对象,也可以获取组件。
2.语法:在需要获取的DOM标签上定义 ref属性并且赋值
<h1 ref="aa"></h1>
然后通过this.$ref.(赋在ref上的那个值就行获取)
mounted() {
console.log(this.$refs.aa);
},
3.获取组件,并且调用组件里面的方法
在一个组件定义一个方法,然后引入另外的一个组件,给组件定义ref.值,然后通过this.$ref.值,就获取到了这个组件,然后就可以调用这个方法。
三. this.nextTick的使用
1.nextTick是用来干什么的?
因为Vue跟新数据是异步的,如果想要获取到实时跟新的数据 this.nextTick(()=>{}),通过异步的回调解决了这一问题。
2.代码举例
<template>
<div class="">
<h1 ref="myP">{{counter}}</h1>
<button @click="fn">点击</button>
</div>
</template>
<script>
export default {
name: '',
data(){return{
counter:0
}},
methods: {
fn(){
this.counter++
console.log(this.$refs.myP.innerHTML);
}
},
}
</script>
解析:当点击按钮的时候counter=>couter++ 变成了1,而我们通过this.$refs.myP.innerHTML 拿到的是0,因为什么呢? 因为Vue跟新数据是异步的。
怎么解决这一问题呢?
通过:异步的回调即可,等到跟新完毕之后,通过回调获得真实的值,代码片段:
this.$nextTick(()=>{
console.log(this.$refs.myP.innerHTML);
})
3.通过promise中的async 和await进行解决
1.this.$nextTick 原地返回是一个Promise对象。
2.async/await 是 ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作。在 async/await 出 现之前,开发者只能通过链式 .then() 的方式处理 Promise 异步操作
async fn(){
this.counter++
await this.$nextTick(()=>{
console.log(this.$refs.myP.innerHTML);
})
}
3.使用async和await的注意事项
await关键字后面要跟 Promise对象
await关键字仅仅只能出来在被async
修饰的函数里面
在 async 方法中,第一个 await 之前的代码会同步执行,await 之后的代码会异步执行
新手小白多多支持
更多推荐
所有评论(0)