asyncawait，回调函数，箭头函数this指向问题
async await，回调函数，箭头函数this指向问题
通过⼀个获取⾳乐api接⼝的例⼦，分别async函数来写获取歌曲列表⽅法，回调函数来写播放⾳乐⽅法，箭头函数来写播放mv⽅法。分别来看⼀下三个函数的this指向问题。接⼝地址为
async await例⼦
async serchMusic（）⽤async修饰serchmusic这个⽅法。本质就是告诉编译器这是个async到异步处理函数。
通过let response = await axios来取代.then（）的回调⽅法，可以有效避免回调地狱，使得代码看起来更像是同步执⾏。response去接受get请求的返回值
async serchMusic(){
var that =this;
try{
let response =await  ("autumnfish/search?keywords="+this.query)//请求⼀个在线⾳乐播放器地址
console.log(this);//结果为window
console.log(that);//结果为window
this.musiclist = sult.songs;
}catch(err){//处理错误或者不存在的请求
<(err);
}
},
.then回调函数
then()⽅法是异步执⾏就是当.then()前的⽅法执⾏完后再执⾏then()内部的程序这样就避免了。个⼈理解回调函数的this是指向window，不属于vue实例对象，所以⽆法来获取vue实例对象data⾥⾯的值。
因为vue调⽤的playMusic⽅法所以第⼀次this指向vue对象实例。第⼆次.then（）⽅法中的this因为.then()⽅法是属于window所以this也指向widow
playMusic  :function(musicId){
var that =this;
console.log(this);//结果为vue实例
console.log(that);//结果为vue实例
<("autumnfish/song/url?id="+ musicId)
.then(function(response){
console.log(response);//异步函数的返回值
console.log(this);//指向window
console.log(that);//指向vue对象实例
console.log(this.query);//未定义
console.log(that.query);//歌曲名
that.musicUrl = response.data.data[0].url;
},function(err){
})
},
箭头函数
箭头函数没有⾃⼰的this，使⽤的是上层作⽤域的this.所以就是指向vue实例可以获取vue对象data⾥的数据
playMv:function(mvid){
var that =this;
console.log(this);//结果为vue实例
console.log(that);//结果为vue实例
<("autumnfish/mv/url?id="+ mvid)
.then((response)=>{
console.log(response);//异步函数的返回值
console.log(this);//指向vue对象实例
console.log(that);//指向vue对象实例
console.log(this.query);//歌曲名
console.log(that.query);//歌曲名
//console.log(response.data.data.url);
that.mvUrl = response.data.data.url;
})
}
完整代码复制运⾏就能播放歌曲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⾳乐接⼝</title>
<script src="js/vue.js"></script>
<!--最新版本的 Bootstrap 核⼼CSS⽂件-->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh
4u" crossorigin="anonymous">
<!--可选的 Bootstrap 主题⽂件（⼀般不⽤引⼊）-->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--最新的 Bootstrap 核⼼ JavaScript ⽂件-->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="cdn.bootcss/axios/0.19.2/axios.min.js"></script>
<style type="text/css">
.global {
background-size:100%100%;
width:100%;
height:900px;
}
</style>
</head>
<body>
<div id="app">
<div class="global">
<span>
<input type="text"class="form-control" placeholder="请输⼊歌⼿" v-model="query" placeholder="输⼊歌曲名字"
@="serchMusic">
<button @click="serchMusic" type="button"class="btn btn-success"
>搜索</button>
</span>
<p ></p>
<ul >
<li v-for="item in musiclist" ><br>
<button class="btn btn-success" href="#" @click="playMusic(item.id)">播放⾳乐</button>
<button class="btn btn-success" href="#" @click="playMusic(item.id)">播放⾳乐</button>
{{item.name}}
<button class="btn btn-success" v-if="item.mvid!=0" @click="playMv(item.mvid)">播放mv</button>
</li>
</ul>
<audio
:src="musicUrl"
controls
autoplay
loop
></audio>
<video :src="mvUrl" controls="controls" autoplay="autoplay">
您的浏览器不⽀持 video 标签。
</video>
</div>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
query:"",
musiclist:[],
musicUrl:[],
mvUrl:"",
},
methods:{
async serchMusic(){
var that =this;
// console.log(this);//结果为vue实例
// console.log(that);//结果为vue实例
try{
let response =await  ("autumnfish/search?keywords="+this.query)//请求⼀个在线⾳乐播放器地址// console.log(this);//结果为vue实例
// console.log(that);//结果为vue实例
this.musiclist = sult.songs;
}catch(err){//处理错误或者不存在的请求
<(err);
}
},
playMusic  :function(musicId){
var that =this;
console.log(this);//结果为vue实例
console.log(that);//结果为vue实例
<("autumnfish/song/url?id="+ musicId)
.then(function(response){
console.log(response);//异步函数的返回值
console.log(this);//指向window
console.log(that);//指向vue对象实例
console.log(this.query);//未定义
console.log(that.query);//歌曲名
that.musicUrl = response.data.data[0].url;
},function(err){
})
},
playMv:function(mvid){
var that =this;
console.log(this);//结果为vue实例
console.log(that);//结果为vue实例
<("autumnfish/mv/url?id="+ mvid)
.then((response)=>{
console.log(response);//异步函数的返回值
console.log(this);//指向vue对象实例
console.log(that);//指向vue对象实例
console.log(this.query);//歌曲名
console.log(this.query);//歌曲名
console.log(that.query);//歌曲名
//console.log(response.data.data.url);                        that.mvUrl = response.data.data.url;
})
await和async使用方法
}
},
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。