taro 异步请求与列表渲染

taro异步请求与列表渲染

客户端

import Taro, { useEffect, useState } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';

export default function Index(props) {
    const [list, setList] = useState([])
    useEffect(() => {
        Taro.request({
            url: 'http://localhost:8080/api/list'
        }).then((res) => {
            const { statusCode, data } = res
            if (statusCode === 200) {
                setList(data)
            }
        })
    }, [])


    return <View>
        {
            list.map(({ value, id }) =>
                <div>
                    <Text>id:{id}-value:{value}</Text>
                </div>
            )
        }
    </View>

}

服务端

const { createServer } = require('http')

const list = Array(10).fill().map((value, i) => ({ value:Math.floor(Math.random()*1000), id: i }))

const server = createServer()

const checkUrl = url => url.includes('/api/list')

server.on('request', (request, response) => {
    const { url } = request
    response.setHeader('Content-Type', 'application/json')
    response.setHeader('Access-Control-Allow-Origin', 'http://192.168.43.77:10086')
    response.setHeader('Access-Control-Allow-Credentials', true)
    checkUrl(url) && response.end(JSON.stringify(list))
})


server.listen(8080, () => console.log('server run at 8080'))