筑基-reac 接口调试 页面渲染

如何请求一个数据接口
拿上一章节中的接口完整来测试

新增页面

1、引入
import Api from './views/Api';
2、使用
<Api/>

假设接口已调整好

react/first-react/src/views/Api/index.jsx
1、导入 axios

import Axios from 'axios';


constructor(props){
    super(props)
    this.state = {
        lists:[]
    }
}
getPdd(pageNum=1,pageSize=10){
    Axios.get(
        '/home/mediareports',
        {
            params:{
                page_number:pageNum,
                page_size:pageSize,
            }
        }
    ).then((res)=>{
        console.log(res.data)
        if(res.data.code===200){
            // 成功
            this.setState({
                lists:res.data.data
            })
        }
    })
}

listFn(data){
    // 数组遍历方法有哪些
    // return data.map((item,index)=>{
    //     return (
    //         <li key={item.id}>
    //             {item.id}-{item.main_title}
    //         </li>
    //     )
    // })
    return data.map((item,index)=>(
        <li key={item.id}>
            {item.id}-{item.main_title}
        </li>
    ))
}
componentDidMount(){
    this.getPdd();
}


render(){
    let {lists} = this.state;
    console.log(lists)
    return(
        <div>
            {
                lists.length!==0
                ?
                <ul>{this.listFn(lists)}</ul>
                :
                <div>无结果</div>
            }
        </div>
    )
}
生命周期我们提过
render 会执行两次
所以要判断一下数组长度

简单的封装
async getApi(url,cfg,headers){
    let	data = await axios.get(url,{params:cfg},
    {
        headers: headers
    })
    return data;
}

this.getApi('/home/mediareports',{
    page_number:'2',
    page_size:'10'
},{}).then((res)=>{
    console.log(res.data)
})

完整代码

react/first-react/src/views/State/Api.jsx
import React, { Component } from 'react';

import Axios from 'axios';

class View extends Component {
    constructor(props){
        super(props)
        this.state = {
            lists:[]
        }
    }
    getPdd(pageNum=1,pageSize=10){
        Axios.get(
            '/home/mediareports',
            {
                params:{
                    page_number:pageNum,
                    page_size:pageSize,
                }
            }
        ).then((res)=>{
            console.log(res.data)
            if(res.data.code===200){
                // 成功
                this.setState({
                    lists:res.data.data
                })
            }
        })
    }
    listFn(data){
        // 数组遍历方法有哪些
        // return data.map((item,index)=>{
        //     return (
        //         <li key={item.id}>
        //             {item.id}-{item.main_title}
        //         </li>
        //     )
        // })
        return data.map((item,index)=>(
            <li key={item.id}>
                {item.id}-{item.main_title}
            </li>
        ))
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    otherFn(){
        //demo
        this.getApi('/home/mediareports',{
            page_number:'2',
            page_size:'10'
        },{}).then((res)=>{
            console.log(res.data)
        })
    }
    componentDidMount(){
        this.getPdd();
    }
    render(){
        let {lists} = this.state;
        return(
            <div>
                {
                    lists.length!==0
                    ?
                    <ul>{this.listFn(lists)}</ul>
                    :
                    <div>无结果</div>
                }
            </div>
        )
    }
}



export default View;


需要接口的可以联调小主