Riot.js에서도 Async/Await 또는 co/yield를 원합니다.
동기
Webpack에서 Riot.js를 변환하는 병아리 (은)는 어쩐지 할 수 있었습니다만, 비동기를 취급하기 시작하면 Promise만으로는 역시 괴롭다. async/await 적어도 co/yeld를 사용하고 싶습니다.
이마이치 정답을 모르고 시행착오 우왕좌왕했기 때문에 나중을 위해서 메모입니다.
프런트 엔드 주위는 1년전의 정보라고 의심하지 않으면 빠진다고 하는 괴로운 세계군요.
Webpack 설정
plugins: ["transform-regenerator", "transform-runtime"]
이 두 가지 babel-plugin을 추가합니다.
es2015-riot에는 transform-regenerator가 포함되어 있습니다.
그러나 브라우저에서 실행하려면 transform-runtime이 필요합니다.
시도해보기
샘플은 여기입니다.
htps : // 기주 b. 코 m / 네 w 규 / 리오 t-sa mp ぇ / t ree / 아 syn c
npm start
하고 http://localhost:8080async.tag
<async-page>
<button class="button { is-loading: yielding }" onclick={ testGeneratorYield }>generator,yield</button>
<button class="button { is-loading: awaiting }" onclick={ testAsyncAwait }>async,await</button>
<div id="notify-area"></div>
<script>
async testAsyncAwait(e) {
this.update({awaiting: true});
const r = await asyncFunc();
riot.mount("#notify-area", "message-notify", {text: r});
this.update({awaiting: false});
}
testGeneratorYield(e) {
const self = this;
co(function*(){
self.update({yielding: true});
const r = yield generatorFunc();
riot.mount("#notify-area", "message-notify", {text: r});
self.update({yielding: false});
})
}
</script>
</async-page>
export function* generatorFunc() {
yield waitFor(2);
return "generator";
}
export async function asyncFunc() {
await waitFor(3);
return "async";
}
function waitFor(sec) {
return new Promise((res, rej) => {
setTimeout(res, 1000*sec);
});
}
아무 버튼이나 누르면 2,3초 후에 메시지가 표시된다는 간단한 것입니다.
async/await 쪽이 타입 수 적게 쓸 수 있네요.
Reference
이 문제에 관하여(Riot.js에서도 Async/Await 또는 co/yield를 원합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NewGyu/items/66ca1ec6231995b9b407텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)