Taro多端統一框架學習（五）請求遠程數據

JSX的列表渲染

在開始介紹遠程數據請求前，先對JSX的列表渲染做下介紹，給JSX不熟悉的朋友提供便利。

構建數組對象

先使用JS的基本語法，打開blog.jsx文件然後再blog方法裏編寫代碼：

const girls = [
    {id:1,name:'胡一菲'},
    {id:2,name:'陳美嘉'},
    {id:3,name:'諸葛大力'},
    {id:4,name:'咖喱醬'}
]

在JSX代碼中渲染列表

blog.jsx的全部代碼

import Taro ,{useState ,useEffect}from '@tarojs/taro'
import {View , Text ,Button,Image} from '@tarojs/components'
import {xiedajiao,liuying} from '../../tools'

function Blog(){

    useEffect(()=>{
        xiedajiao()
        liuying()
    },[])
    ·
	const girls = [
	    {id:1,name:'胡一菲'},
	    {id:2,name:'陳美嘉'},
	    {id:3,name:'諸葛大力'},
	    {id:4,name:'咖喱醬'}
	]
	
    const  [blogTitle,setBlogTitle]=useState('JSPangBlog')
    const  [introduce,setIntroduce]=useState('111111')
    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
    }
    return (
        <View>
            <Text>Blog Page111</Text>
            <Button onClick={gotoIndex}>我要去Index頁面</Button>
            <View>
            { girls.map((item,index)=>{
			    return (
			        <View>{item.name}</View>
			    )
			}) }
			</View>
        </View>
    )
}

在JSX中使用邏輯判斷

在JSX中使用邏輯判斷，不能像下邊這樣用判斷：

<view>
    {
        if(zhujueNum===1){
            return ('張偉')
        }else{
            return('呂子喬')
        }
    }
</view>

需要使用判斷要用三目運算符：

<view>
    男主角是：{zhujueNum==1?'張偉':'呂子喬'}
</view>

或者也可以使用，短路運算符：

<view>
    男主角是：{zhujueNum==1 && '張偉' || '呂子喬'}
</view>

請求遠程數據

Taro的遠程數據請求，利用Taro的request的方式，這裏給出request的參數文檔：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
下邊我們在blog.jsx文件中，編寫一個testHandler方法，方法中使用Taro.request後去遠端數據，這裏數據請求的路徑url，你可以去mockJs網站，也可以自己用node等方式創建一個數據請求路徑，或者你項目開發時候的路徑

const getData= ()=>{
    Taro.request({
        url:'...'
    }).then(res=>{
        console.log(res.data)
    })
}

然後在JSX中編寫一個按鈕，加上onClick事件,代碼如下：

<Button onClick={getData}>獲取數據</Button>

遍歷渲染獲取到的數據

先用useState聲明一個articleList,代碼如下：

const  [articleList,setArticleList] = useState([])

然後在return中使用map進行遍歷，如下：

{
    articleList.map((item,index)=>{
        return (<View key={index}>- {item.title} </View>)
    })
}

blog.jsx完整的代碼：

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

function Blog2(){
    const [dataList, setDataList] = useState([])

    const getData = () => {
        Taro.request({
            url: 'https://apiblog.jspang.com/default/getArticleList'
        })
        .then((res)=>{
            console.log(res.data)
            setDataList(res.data.list)
        })
    }

    return (
        <View>
            <View><Text>數據請求</Text></View>
            <Button onClick={getData} >獲取數據</Button>
            <View>
                {
                    dataList.map((item, index)=>{
                        return (
                            <View key={index} >{item.title}</View>
                        )
                    })
                }
            </View>
        </View>
    )
}
export default Blog2