12、Vue之Axios fetchJsonp请求数据（第三方

数据请求步骤（与vue-resource略有不同）：
一、axios的配置：
1、在相应的工程中 npm install axios --save(‘save’的作用是将模块保存在package.json中，以便项目转接时省事);

image.png

2、哪里用，那里引入即可：
import Axios from 'axios'

image.png

二、使用：
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)
})

image.png

代码：
Home.vue:

image.png

<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>