react中 如何异步展示后台接口的提示消息?
调用接口后,后台会返回这样的一段信息提示:{"errCode":400002,"errMsg":"字段校验异常","data":{"jzq":"日期不能为空","cfmc":"名称不能为空","jdrq":"决定日期不能为空","cflb1":"类别1不能为空"}}
先补充点一些其他的知识:
关于axios(以前用的jquer的ajax请求,现在大都推崇axios来代替)
参考地址:http://www.tuicool.com/articles/yINjEb6
执行 POST 请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
项目框架用到的技术组合:
1.react+ant design+react-router+redux(关于每个框架具体是怎么用和用来做什么的还请自己查阅相关文档)
2. 使用 immutable state
React 与 ES2015 的 Class 语法搭配的很好.
class HelloMessage extends React.Component {
render() {
return
Hello {this.props.name}
} }
4.打包编译工具:babel
下面进入今天的主题:一个业务场景是这样的,我有一个表单,我正在编辑该表单的某些字段,然后当我点击“保存”按钮的时候,执行保存,成功提示“保存成功”,如果失败,需要提示后台返回的错误消息:具体是那个字段出问题了。
现在回到我的代码上来,其实这个功能按照传统的jQuery模式很简单,ajax后分success或者erro就可以做操作了!在react中,在看看应该如何来实现:
handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((errors, values) => { if (errors) { console.error(errors); return; } const payload = {...this.props.xkObj, ...values};
//调用执行修改函数 this.props.xzxkService.updateXzxk(payload) .then(data=> { console.log('data', data); Utils.pushLink('/reporting/xxxx') }) .catch(error=> {
//当有错误消息是提示错误消息 const err = {errCode: error.errCode, errMsg: error.errMsg, data: error.data}; console.log('err', err); let hlresultMessage =""; hlresultMessage +='错误消息:'; if (err) { for(let i in err.data){ hlresultMessage +=err.data[i]+',';//组装这个对象,拼接错误消息 } //alert(hlresultMessage); Modal.error({//使用模态框的error模式,需要引入对应的组件 title:'错误消息', content:hlresultMessage }) } }); }); };
- 上一篇 »制作一个html中闪动的title 来提示消息
- 下一篇 »java如何异步方式处理业务逻辑?