没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
React/Redux应用使用应用使用Async/Await的方法的方法
本篇文章主要介绍了React/Redux应用使用Async/Await的方法,小编觉得挺不错的,现在分享给大家,也给大
家做个参考。一起跟随小编过来看看吧
Async/Await是尚未正式公布的ES7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务
代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await 。虽然这个特性尚未正式发布,但是利用
babel polyfill我们已经可以在应用中使用它了。
现在假设一个简单的React/Redux应用,我将引入 Async/Await 到其代码。
Actions
此例子中有一个创建新文章的 Action ,传统方法是利用 Promise 结合 Redux-thunk 中间件实现。
import axios from 'axios'
export default function createPost (params) {
const success = (result) => {
dispatch({
type: 'CREATE_POST_SUCCESS',
payload: result
})
return result
}
const fail = (err) => {
dispatch({
type: 'CREATE_POST_FAIL',
err
})
return err
}
return dispatch => {
return axios.post('http://xxxxx', params)
.then(success)
.catch(fail)
}
}
现在将它改写为 async/await 的实现:
import axios from 'axios'
export default function createPost (params) {
const success = (result) => {
dispatch({
type: 'CREATE_POST_SUCCESS',
payload: result
})
return result
}
const fail = (err) => {
dispatch({
type: 'CREATE_POST_FAIL',
err
})
return err
}
return async dispatch => {
try {
const result = await axios.post('http://xxxxx', params)
return success(result)
} catch (err) {
return fail(err)
}
}
}
async和await是成对使用的,特点是使代码看起来和同步代码类似。
Components
资源评论
weixin_38698311
- 粉丝: 9
- 资源: 925
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功