1.fetch.js
import axios from 'axios'
const baseUrl='http://localhost:8080'
function fetch(api,method,callback){
axios({
url:baseUrl+api,
method:method,
headers:{
token:'809321849084738'
}
}).then(res=>{
console.log('成功')
let data=null
if(res.data.code===0){
data=res.data.data
}
callback&&callback(data)
}).catch(err=>{
console.log('失敗',err)
}).then(()=>{
// 總會執(zhí)行
})
}
export default fetch
2.MusicStore.js
import{
observable,
action
} from 'mobx'
import fetch from '../util/fetch.js'
class MusicStore{
@observable zjl='周'
@observable list=[]
@action getMusic(){
let api='/soso/fcgi-bin/client_search_cp?ct=24&qqmusic_ver=1298&new_json=1&remoteplace=txt.yqq.song&searchid=54977806238856592&t=0&aggr=1&cr=1&catZhida=1&lossless=0&flag_qc=0&p=1&n=10&w=%E5%91%A8%E6%9D%B0%E4%BC%A6&g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0'
fetch(api,'GET',(data)=>{
console.log('=======',data)
this.list=data.song.list
})
}
}
export default MusicStore
3.在webpack中的的devserver配置代理
proxy: {
"/soso": {
target: "https://c.y.qq.com",
secure: false
}
}
4.在頁面中調(diào)用接口
let {MusicStore}=this.props.store
{
MusicStore.list.map((ele,idx)=>{
return(
<div key={ele.id}>
<span>{ele.name}</span>
</div>
)
})
}
