数据请求步骤(与vue-resource略有不同):
一、axios的配置:
1、在相应的工程中 npm install axios --save(‘save’的作用是将模块保存在package.json中,以便项目转接时省事);
2、哪里用,那里引入即可:
import Axios from 'axios'
二、使用:
1、在组件中使用:(以QQ音乐接口为例)
let api='https://api.bzqll.com/music/tencent/songList?key=579621905&id=1147906982';
Axios.get(api).then((response)=>{
console.log(response)
}).catch((err)=>{
console.log(err)
})
代码:
Home.vue:
<template>
<div>
<h2>这是一个首页组件</h2>
<button @click="getData()">请求数据</button>
</div>
</template>
<script>
import Axios from 'axios'//哪里用,就在那里引用(比如,Home.vue这个组件里要用,则在此处引入)
export default {
name: "home",
data(){
return {
msg:'我是一个首页',
list:[],
}
},
methods:{
getData(){
let api='https://api.bzqll.com/music/tencent/songList?key=579621905&id=1147906982';
Axios.get(api).then((response)=>{
console.log(response)
}).catch((err)=>{
console.log(err)
})
}
},
}
</script>
<style scoped lang="scss">
h2{
color:red;
}
</style>