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