代码语言：javascript复制
import React from 'react';
import axios from 'axios'
class Axios extends React.Component {
//构造函数
constructor() {
super();
//react定义数据
this.state = {
list:[]
}
}
//请求接口的方法
getData=()=>{
//var api='https://www.apiopen.top/weatherApi?city=上海';
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
.then((response) =>{
// handle success
console.log(response.data.result);
//用到this需要注意指向，箭头函数
this.setState({
list:response.data.result
})
})
.catch(function (error) {
// handle error
console.log(error);
});
}
render() {
return (
<div>
<h2>axios获取数据</h2>
<button onClick={this.getData}>获取api接口</button>
<ul>
{
this.state.list.map((value,key)=>{
return<li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}
export default Axios;因为这个免费的接口可能过段时间就会挂掉，所以把接口的数据直接复制在这里了，后面就算挂掉了也可以自己做成mock数据哦
数据的json格式：
代码语言：javascript复制{
"result": [
{
"aid": "499",
"catid": "20",
"username": "admin",
"title": "u3010u56fdu5185u9996u5bb6u3011u5faeu4fe1u5c0fu7a0bu5e8fu89c6u9891u6559u7a0bu514du8d39u4e0bu8f7d",
"pic": "portal/201610/13/211832yvlbybpl3rologrr.jpg",
"dateline": "1476364740"
},
{
"aid": "498",
"catid": "20",
"username": "admin",
"title": "ionicu57dfu8d44u6e90u5171u4eab CORS u8be6u89e3",
"pic": "",
"dateline": "1472952906"
},
{
"aid": "497",
"catid": "20",
"username": "admin",
"title": "u79fbu52a8u7aefu89e6u6478u6ed1u52a8jsu63d2u4ef6_html5u624bu673au7aefu8f6eu64adu63d2u4ef6",
"pic": "portal/201606/28/211604ullzo5arr4iurnum.jpg",
"dateline": "1467119820"
},
{
"aid": "496",
"catid": "20",
"username": "admin",
"title": "u672au6765u7a0bu5e8fu5458u4f1au88abu673au5668u4ebau53d6u4ee3u5417uff1f",
"pic": "portal/201606/02/221818eafffffm4srfdf4s.jpg",
"dateline": "1464874140"
},
{
"aid": "495",
"catid": "20",
"username": "admin",
"title": "u9524u5b50u5b89u5168u9524_u9524u5b50u771fu7684u51fau4e86u4e2au201cu9524u5b50u201duff1au8f66u5145uff0bu5b89u5168u9524",
"pic": "portal/201605/20/213752f6i56f1e0hbfzhkb.jpg",
"dateline": "1463751505"
},
{
"aid": "494",
"catid": "20",
"username": "admin",
"title": "html5u80fdu505au4ec0u4e48_html5u80fdu505au54eau4e9bu5f00u53d1uff1f",
"pic": "",
"dateline": "1463664540"
},
{
"aid": "493",
"catid": "20",
"username": "admin",
"title": "u5e73u5b89u53e3u888bu94f6u884cAppu91c7u7528-Cordovau6df7u5408u5f00u53d1",
"pic": "",
"dateline": "1463294580"
},
{
"aid": "492",
"catid": "20",
"username": "admin",
"title": "JavaScript Emoji u8868u60c5u5e93_js u7c7bu4f3cu4e8eqqu5faeu4fe1u7684u8868u60c5u5e93",
"pic": "portal/201604/25/084907r2e3im3dvd1q3f7z.jpg",
"dateline": "1461545392"
},
{
"aid": "491",
"catid": "20",
"username": "admin",
"title": "cordovau70edu66f4u65b0u63d2u4ef6-u4e0du53d1u5e03u5e94u7528u5e02u573au52a8u6001u66f4u65b0APPu6e90u7801",
"pic": "portal/201604/12/152638zaxz5xz3t58bfts2.png",
"dateline": "1460446140"
},
{
"aid": "490",
"catid": "20",
"username": "admin",
"title": "u592eu884cu65b0u89c4uff01u652fu4ed8u5b9du3001u5faeu4fe1u7528u6237u522bu5fd8u505au8fd9u4ef6u4e8b",
"pic": "portal/201603/29/144942tcnnenueefagukfk.jpg",
"dateline": "1459234206"
},
{
"aid": "471",
"catid": "20",
"username": "admin",
"title": "HTML5 u79fbu52a8appu5f00u53d1u6846u67b6u8be5u5982u4f55u9009u62e9",
"pic": "portal/201511/15/163112q4kz6k2rgcgpi1tc.jpg",
"dateline": "1457771160"
},
{
"aid": "488",
"catid": "20",
"username": "admin",
"title": "u7eafCSS3u52a8u753bu6309u94aeu6548u679c,u53efu7528u4e8eu79fbu52a8wap appu5f00u53d1",
"pic": "portal/201603/09/202742r1kngyt17na7n1nk.jpg",
"dateline": "1457526780"
},
{
"aid": "487",
"catid": "20",
"username": "admin",
"title": "u4eacu4e1cu6bcfu5929u4e8fu4e0au4ebf_u4e0du4f1au6284u88adu3001u527du7a83?u5fc5u5c06u6b7bu5728u4e92u8054u7f51u4e0bu4e00u7ad9u7684u8d77u70b9u4e0a! ...",
"pic": "portal/201603/02/155825h28zxs2vsxjccv4c.jpg",
"dateline": "1456905746"
},
{
"aid": "486",
"catid": "20",
"username": "admin",
"title": "ionic react-nativeu548cnativeu5f00u53d1u79fbu52a8appu90a3u4e2au597d",
"pic": "portal/201602/25/193433dtzfvlzl1oavhljy.jpg",
"dateline": "1456398960"
},
{
"aid": "484",
"catid": "20",
"username": "admin",
"title": "u8fd912u884cu4ee3u7801u5206u5206u949fu8ba9u4f60u7535u8111u5d29u6e83u624bu673au91cdu542f",
"pic": "",
"dateline": "1453426595"
},
{
"aid": "483",
"catid": "20",
"username": "admin",
"title": "u7f57u632fu5b87u7f57u6c38u6d69u96f7u519bu4eecu7684u6f14u8bb2 u4f60u559cu6b22u54eau4e00u4e2a",
"pic": "",
"dateline": "1452226800"
},
{
"aid": "482",
"catid": "20",
"username": "admin",
"title": "ionic-native-transitionsu8ba9u4f60u7684Ionicu5e94u7528u6bd4u539fu751fu8fd8u5feb",
"pic": "portal/201601/07/135529z4r7gwglv4rw8l74.jpeg",
"dateline": "1452145500"
},
{
"aid": "481",
"catid": "20",
"username": "admin",
"title": "ionic 1.2.4 u53d1u5e03uff0cu6700u597du7684html5u79fbu52a8appu5f00u53d1u6846u67b6",
"pic": "portal/201601/05/132107h9bllr7li74zoh49.jpg",
"dateline": "1451971293"
},
{
"aid": "480",
"catid": "20",
"username": "admin",
"title": "phonegapu53d1u5e03u5e94u7528u5230appstore",
"pic": "portal/201601/05/122115yhh22i77sqn2ijc6.jpg",
"dateline": "1451967910"
},
{
"aid": "479",
"catid": "20",
"username": "admin",
"title": "HTML5u4effu82f9u679cu5e94u7528u7684u52a8u753b",
"pic": "portal/201601/04/220252ycyddectvivr55pq.png",
"dateline": "1451916189"
}
]
}
