Flink 从0到1实战实时风控系统-完结14章

kuanmdboss · · 122 次点击 · 开始浏览    置顶

学习地址1:https://pan.baidu.com/s/1t7YzuC7b3g2Nsm9frtGJZA 提取码: ughc 学习地址2:https://share.weiyun.com/zUoCBRio 密码:dc5hxc 什么是风控系统? 风控系统是指一系列的完整的风险控制,以保证事情向好的方向发展,而免受不可预估的经济和财产损失而措手不及。 风控类型 风控类型一般分为事前、事中、事后三种。 事前风控是指在交易指令发送到交易所前,对交易指令进行风险检测,通过检测的交易指令则提交到交易模块进行报单,未通过检测的交易指令将直接予以拒绝。对于追求低延时的交易策略,事前风控需要在极短的时间内完成。 事中风控主要是指在交易过程中,交易团队对策略的信号生成、执行情况进行监控以及盘中对策略的风险度进行实时监控。 事后风控是对交易数据在盘后进行分析,比如策略算法是否存在错误、策略的回撤是否可控、是否有计划外的持仓出现等,从而制定更严谨的业务风控预案和优化代码算法调整策略表现。 在src文件夹中创建一个新文件,文件命名为“AppState.tsx”,我们将会在这个文件中创建全局state和上下文组件contex component。 首先,引入我们需要的react框架。 interface AppStateValue { username: string, shoppingCart: { items: { id: number; name: string }[]; }; } 然后,打开Header.tsx,在这个文件中我们创建一个新的函数式react组件,顺便引入我们的css样式文件 import React from "react"; import styles from "./Header.module.css"; export const Header: React.FC = () => { return () } 那么接下来,我们来把signin页面从路径JSX代码中挪出去,以页面组件的形式渲染出来。既然是页面,那么我们在pages文件夹中创建signin的相关页面吧。在pages文件夹中创建子文件夹signin,然后创建我们的三大金刚,index.ts, SignInPage.tsx,以及SignInPage.module.css。请同学们先打开SignInPage.tsx,我们先为页面创建一个最简单的函数式组件,组件内渲染一个H1标题,标题名称登陆页面。 import React from "react"; export const SignInPage: React.FC = () => { return <h1>SignIn</h1>; }; 打开DetailPage.tsx,我们先引入react框架,创建一个最基本的函数式组件 import React from "react"; export const DetailPage: React.FC = (props) => { return ( <div> <h1>旅游路线详情页面</h1> </div> ); }; 这个get的返回值是一个promise。我们需要使用 .then 函数来处理,函数的参数是个lamda表达式,而我们关心的是响应的主体数据,也就是reponse.data,可以简单使用花括号在参数中直接展开reponse,取得data。理论上来说,响应数据data的类型应该与postman中的输出结果是一摸一样的,所以,我们把数据添加到组件state的产品列表1、2、3中。 componentDidMount() { axios.get('http://123.56.149.216:8080/api/productCollections', { headers: { 'x-icode': 'FB80558A73FA658E', }, }).then(({data}) => { this.setState({ productList1: data }); }) } 函数体内使用async,这个函数本身也必须是async,所以我们给componentDidMount加上async关键词。因为axios.get的返回值本来就是一个promise,所以我们可以给它加上await,等待get请求的执行,并取得响应数据response,而我们需要的是响应的主体数据data,可以使用花括号直接展开。于是,我们就获得了与postman一样的数据,接下来的代码就和promise then一样了,稍微整理一下。 async componentDidMount() { const { data } = await axios.get( "http://123.56.149.216:8080/api/productCollections", { headers: { "x-icode": "FB80558A73FA658E", }, } ); this.setState({ loading: false, productList: data }); } 但是如果api访问错误。我们就需要使用try catch来捕获error了,出错的时候我们同样要吧loading设置为false,但是这个时候error就要被切换为错误信息了,e.message. interface StateProps { loading: boolean, productList: any[], } constructor(props){ super(props) this.state = { loading: true, error: null, productList: [], }; } async componentDidMount() { try { const { data } = await axios.get( "http://123.56.149.216:8080/api/productCollections" ); this.setState({ loading: false, error: null, productList1: data, }); } catch (e) { this.setState({ loading: false, error: e.message, }); } } Ok, 转菊花的控制状态配置完成,接下来就要在jsx代码中转菊花了,从组件state中展开loading 和 error。我们依旧使用最简单的方法,直接暴力使用一个if语句,当loading为ture的时候输出转菊花,就是渲染Spin组件,设置size大小为最大,“large”。然后定义一些inline style if(loading) { return ( <Spin size="large" style={{ marginTop: 200, marginBottom: 200, marginLeft: "auto", marginRight: "auto", width: "100%", }} /> ); } 接下来,我们来复制粘题一下代码。请同学们打开DetailPage。我们把useEffect中所有的数据请求代码全部剪切出来。复制到getProductDetail的callback函数中去。接着给dispatch加上thunkAPI。 然后还有一个报错,我们需要引用axios import axios from "axios"; export const getProductDetail = createAsyncThunk( "productDetail/getProductDetail", async (touristRouteId: string, thunkAPI) => { thunkAPI.dispatch(productDetailSlice.actions.fetchStart()); try { const { data } = await axios.get( `http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}` ); thunkAPI.dispatch(productDetailSlice.actions.fetchSuccess(data)); } catch (error) { thunkAPI.dispatch(productDetailSlice.actions.fetchFail(error.message)); } } ); 在callback函数中去掉所有的dispatch,然后也删掉try catch,因为我们将会返回promise,让promise自己来处理。所以retun的应该是data这个对象。 export const getProductDetail = createAsyncThunk( "productDetail/getProductDetail", async (touristRouteId: string, thunkAPI) => { const { data } = await axios.get( `http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}` ); return data; } );

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

122 次点击  
加入收藏 微博
1 回复  |  直到 2023-12-08 11:33:41
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传