学习taro+react从0-1完整版7/7 --- api与网络请求

API说明

1.使用网络请求数据

2.创建一个新的页面，比如是duanzi，示例是一个循环列表

3.首先要获取数据

4.在store中新建一个duanzi.ts,在这个文件里导入mobx；导入请求数据

import { observable } from 'mobx'
import {getdzlist} from '../serveces/duanzi'  //方法导入进来


const duanzistore = observable({
   dzlist: [],  //一开始是空的要从后端请求过来
   setdzlist: async function() {  //这个不可以写箭头函数
     let res = await getdzlist()  //进行异步请求得到数据
     console.log(res);
     
   this.dzlist = res.data.result
  }
})

export default duanzistore

5.请求数据：在src里新建一个文件夹servable/duanzi.ts,在这里请求数据

import Taro from '@tarojs/taro'

//把想要导出的对象导出去
export function getdzlist() {
  let httpurl = "https://api.apiopen.top/getJoke?page=1&count=10&type=text";
  return Taro.request({url:httpurl})  //这时候会返回promise对象
} 

 6.在页面中调用store中的方法

7.在app.tsx中注入store中的duanzi

import duanzistore from './store/duanzi'
const store = {
  duanzistore
}

8.在app.config.ts中进行路由配置 

 'pages/duanzi/index',

9.这样就可以在duanzi页面显示出来

import { Component, PropsWithChildren } from 'react'
//导入
import { View} from '@tarojs/components'
//状态管理
import { observer, inject } from 'mobx-react'


import './index.less'

@inject('store')
@observer
class Index extends Component<PropsWithChildren> {
  componentDidMount() {
  let { store }: any = this.props;
    let duanzistore = store.duanzistore
    duanzistore.setdzlist()
}
  render() {
    let { store }: any = this.props;
    let duanzistore = store.duanzistore
    console.log(duanzistore);
    return (
      
      <View className='index'>
        {/* 将数据循环到页面上 */}
        {
          duanzistore.dzlist.map((item, i) => {
            return (<view key={i}>{ item.text}</view>)
          })
   }
      </View>
    )
  }
}

export default Index