react调接口

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(()=>{
        // 总会执行

    })
}
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&notice=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.在页面中调用接口

  let {MusicStore}=this.props.store
{
                        MusicStore.list.map((ele,idx)=>{
                            return(
                                <div key={ele.id}>
                                    <span>{ele.name}</span>
                                </div>
                            )
                        })
                    }