cnode接口
- 网址：https://cnodejs.org/ Node.js专业中文社区
- API https://cnodejs.org/api
fetchAPI
用Promise实现
官网： http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
fetch("https://cnodejs.org/api/v1/topics?tab=good")
.then(response => response.json())
.then(json => {
this.setState({
list: json.data
})
console.log(json.data[0]);
})
.catch(err => console.log('Request Failed', err));
用async和await实现
let url = "https://cnodejs.org/api/v1/topics?tab=good"
try {
let response = await fetch(url);
let json = await response.json();
this.setState({
list: json.data
})
console.log(json.data[0]);
} catch (error) {
console.log('Request Failed', error);
}
第一种tab切换
需求： 三个标签对应三个不同排版样式的内容
创建三个组件： Book.jsx Phone.jsx Toy.jsx
import React, { Component } from 'react';
import './Tab.css'
import Book from './components/tab/Book'
import Phone from './components/tab/Phone'
import Toy from './components/tab/Toy'
// 需求分析： 三个tab标签对应三块不同排版的内容，标签切换时，下方的组件切换
class Tab extends Component {
constructor(props) {
super(props);
this.state = {
tabList: [
{
"id": 4,
"title": '图书'
},
{
"id": 8,
"title": '玩具'
},
{
"id": 10,
"title": '手机'
}
],
curIndex: 0,
title: "图书"
}
}
toggle = (index,title)=>{
this.setState({
curIndex: index,
title
})
}
getList = ()=>{
let { title } = this.state
if (title === "图书"){
return <Book></Book>
}
if (title === "玩具"){
return <Toy></Toy>
}
if (title === "手机"){
return <Phone></Phone>
}
}
render() {
let {tabList,curIndex} = this.state
return (
<div className="tab-box">
<ul>
{
tabList.map((item, index) => {
return (
<li
key={item.id}
onClick={()=>{this.toggle(index,item.title)}}
className={curIndex === index ? 'active': ''}
> {item.title}</li>
)
})
}
</ul>
{this.getList()}
</div>
);
}
}
export default Tab;
第二种tab切换
需求： 三个标签对应一个内容区，请求不同，数据不同
用浏览器原生API fetch实现
import React, { Component } from 'react';
import "./Tab.css"
class Tab2 extends Component {
constructor(props) {
super(props);
this.state = {
tabList: [
{
"type": "good",
"title": "精华"
},
{
"type": "share",
"title": "分享"
},
{
"type": "ask",
"title": "问答"
}
],
curIndex: 0,
list: [],
loading: true
}
}
async getData(type) {
let url = `https://cnodejs.org/api/v1/topics?tab=${type}`
try {
let response = await fetch(url);
let json = await response.json();
this.setState({
list: json.data,
loading: false
})
} catch (error) {
console.log('Request Failed', error);
}
}
componentDidMount() {
this.getData('good')
}
//切换标签
toggle(index) {
this.setState({
curIndex: index,
loading: true
})
let type = this.state.tabList[index].type
this.getData(type)
}
render() {
let { tabList, curIndex, list } = this.state
return (
<div className="tab-box">
<ul className="title">
{
tabList.map((item, index) => {
return (
<li
key={index}
className={curIndex === index ? "active" : ''}
onClick={() => { this.toggle(index) }}
>{item.title}</li>
)
})
}
</ul>
<div>
{
this.state.loading
?
<div>loading......</div>
:
(
<ul>
{
list.map((item, index) => {
return (
<li
key={index}
>{item.title}</li>
)
})
}
</ul>
)
}
</div>
</div>
);
}
}
export default Tab2;
