学习地址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;
}
);
有疑问加站长微信联系（非本文作者）
