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=%E4%B8%8A%E6%B5%B7';
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 (
axios获取数据
{
this.state.list.map((value,key)=>{
return- {value.title}
})
}
)
}
}
export default Axios;
因为这个免费的接口可能过段时间就会挂掉，所以把接口的数据直接复制在这里了，后面就算挂掉了也可以自己做成mock数据哦
数据的json格式：
{
"result": [
{
"aid": "499",
"catid": "20",
"username": "admin",
"title": "\u3010\u56fd\u5185\u9996\u5bb6\u3011\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u9891\u6559\u7a0b\u514d\u8d39\u4e0b\u8f7d",
"pic": "portal\/201610\/13\/211832yvlbybpl3rologrr.jpg",
"dateline": "1476364740"
},
{
"aid": "498",
"catid": "20",
"username": "admin",
"title": "ionic\u57df\u8d44\u6e90\u5171\u4eab CORS \u8be6\u89e3",
"pic": "",
"dateline": "1472952906"
},
{
"aid": "497",
"catid": "20",
"username": "admin",
"title": "\u79fb\u52a8\u7aef\u89e6\u6478\u6ed1\u52a8js\u63d2\u4ef6_html5\u624b\u673a\u7aef\u8f6e\u64ad\u63d2\u4ef6",
"pic": "portal\/201606\/28\/211604ullzo5arr4iurnum.jpg",
"dateline": "1467119820"
},
{
"aid": "496",
"catid": "20",
"username": "admin",
"title": "\u672a\u6765\u7a0b\u5e8f\u5458\u4f1a\u88ab\u673a\u5668\u4eba\u53d6\u4ee3\u5417\uff1f",
"pic": "portal\/201606\/02\/221818eafffffm4srfdf4s.jpg",
"dateline": "1464874140"
},
{
"aid": "495",
"catid": "20",
"username": "admin",
"title": "\u9524\u5b50\u5b89\u5168\u9524_\u9524\u5b50\u771f\u7684\u51fa\u4e86\u4e2a\u201c\u9524\u5b50\u201d\uff1a\u8f66\u5145\uff0b\u5b89\u5168\u9524",
"pic": "portal\/201605\/20\/213752f6i56f1e0hbfzhkb.jpg",
"dateline": "1463751505"
},
{
"aid": "494",
"catid": "20",
"username": "admin",
"title": "html5\u80fd\u505a\u4ec0\u4e48_html5\u80fd\u505a\u54ea\u4e9b\u5f00\u53d1\uff1f",
"pic": "",
"dateline": "1463664540"
},
{
"aid": "493",
"catid": "20",
"username": "admin",
"title": "\u5e73\u5b89\u53e3\u888b\u94f6\u884cApp\u91c7\u7528-Cordova\u6df7\u5408\u5f00\u53d1",
"pic": "",
"dateline": "1463294580"
},
{
"aid": "492",
"catid": "20",
"username": "admin",
"title": "JavaScript Emoji \u8868\u60c5\u5e93_js \u7c7b\u4f3c\u4e8eqq\u5fae\u4fe1\u7684\u8868\u60c5\u5e93",
"pic": "portal\/201604\/25\/084907r2e3im3dvd1q3f7z.jpg",
"dateline": "1461545392"
},
{
"aid": "491",
"catid": "20",
"username": "admin",
"title": "cordova\u70ed\u66f4\u65b0\u63d2\u4ef6-\u4e0d\u53d1\u5e03\u5e94\u7528\u5e02\u573a\u52a8\u6001\u66f4\u65b0APP\u6e90\u7801",
"pic": "portal\/201604\/12\/152638zaxz5xz3t58bfts2.png",
"dateline": "1460446140"
},
{
"aid": "490",
"catid": "20",
"username": "admin",
"title": "\u592e\u884c\u65b0\u89c4\uff01\u652f\u4ed8\u5b9d\u3001\u5fae\u4fe1\u7528\u6237\u522b\u5fd8\u505a\u8fd9\u4ef6\u4e8b",
"pic": "portal\/201603\/29\/144942tcnnenueefagukfk.jpg",
"dateline": "1459234206"
},
{
"aid": "471",
"catid": "20",
"username": "admin",
"title": "HTML5 \u79fb\u52a8app\u5f00\u53d1\u6846\u67b6\u8be5\u5982\u4f55\u9009\u62e9",
"pic": "portal\/201511\/15\/163112q4kz6k2rgcgpi1tc.jpg",
"dateline": "1457771160"
},
{
"aid": "488",
"catid": "20",
"username": "admin",
"title": "\u7eafCSS3\u52a8\u753b\u6309\u94ae\u6548\u679c,\u53ef\u7528\u4e8e\u79fb\u52a8wap app\u5f00\u53d1",
"pic": "portal\/201603\/09\/202742r1kngyt17na7n1nk.jpg",
"dateline": "1457526780"
},
{
"aid": "487",
"catid": "20",
"username": "admin",
"title": "\u4eac\u4e1c\u6bcf\u5929\u4e8f\u4e0a\u4ebf_\u4e0d\u4f1a\u6284\u88ad\u3001\u527d\u7a83?\u5fc5\u5c06\u6b7b\u5728\u4e92\u8054\u7f51\u4e0b\u4e00\u7ad9\u7684\u8d77\u70b9\u4e0a! ...",
"pic": "portal\/201603\/02\/155825h28zxs2vsxjccv4c.jpg",
"dateline": "1456905746"
},
{
"aid": "486",
"catid": "20",
"username": "admin",
"title": "ionic react-native\u548cnative\u5f00\u53d1\u79fb\u52a8app\u90a3\u4e2a\u597d",
"pic": "portal\/201602\/25\/193433dtzfvlzl1oavhljy.jpg",
"dateline": "1456398960"
},
{
"aid": "484",
"catid": "20",
"username": "admin",
"title": "\u8fd912\u884c\u4ee3\u7801\u5206\u5206\u949f\u8ba9\u4f60\u7535\u8111\u5d29\u6e83\u624b\u673a\u91cd\u542f",
"pic": "",
"dateline": "1453426595"
},
{
"aid": "483",
"catid": "20",
"username": "admin",
"title": "\u7f57\u632f\u5b87\u7f57\u6c38\u6d69\u96f7\u519b\u4eec\u7684\u6f14\u8bb2 \u4f60\u559c\u6b22\u54ea\u4e00\u4e2a",
"pic": "",
"dateline": "1452226800"
},
{
"aid": "482",
"catid": "20",
"username": "admin",
"title": "ionic-native-transitions\u8ba9\u4f60\u7684Ionic\u5e94\u7528\u6bd4\u539f\u751f\u8fd8\u5feb",
"pic": "portal\/201601\/07\/135529z4r7gwglv4rw8l74.jpeg",
"dateline": "1452145500"
},
{
"aid": "481",
"catid": "20",
"username": "admin",
"title": "ionic 1.2.4 \u53d1\u5e03\uff0c\u6700\u597d\u7684html5\u79fb\u52a8app\u5f00\u53d1\u6846\u67b6",
"pic": "portal\/201601\/05\/132107h9bllr7li74zoh49.jpg",
"dateline": "1451971293"
},
{
"aid": "480",
"catid": "20",
"username": "admin",
"title": "phonegap\u53d1\u5e03\u5e94\u7528\u5230appstore",
"pic": "portal\/201601\/05\/122115yhh22i77sqn2ijc6.jpg",
"dateline": "1451967910"
},
{
"aid": "479",
"catid": "20",
"username": "admin",
"title": "HTML5\u4eff\u82f9\u679c\u5e94\u7528\u7684\u52a8\u753b",
"pic": "portal\/201601\/04\/220252ycyddectvivr55pq.png",
"dateline": "1451916189"
}
]
}