如何使用 ES6 承诺和生成器加载 xmlHttpRequest 资源 inline/sequentially?
How Load xmlHttpRequest resources inline/sequentially with ES6 Promises & Generators?
我如何创建一个 "data = xhrLoad(url)" 内部异步但 w/o .then 或回调 "hell" 的函数?我希望 xhrLoad 发挥 Promise/Generator 魔力,但只有在数据可用时才 return。
示例:
data = initMyProgram(); // may call data = xhrLoad(url)
<use data here>
<more inline code here>
我意识到 Promise 很棒,.then/.catch 很复杂..但我想要内联的顺序代码..如果数据可用,甚至可能不需要的代码片段 w/o 外部资源。
Ex:在 webgl 编程中,着色器可以在 <scripts>
、外部文件、es6 模块、es6 模板字符串等中。如果需要,我想通过 xhr 请求来神奇地管理它在 initMyProgram returns.
之前完成
虽然在 ES6 中可以做到,但不一定很方便。但是有几个blog posts,按照它们应该很简单。
有一个提案 async/await
for ES7. Babel 已经支持。
请注意,async/await
只是处理 promise 的语法糖。声明为异步的函数总是 return 一个承诺,因此在顶层你仍然必须使用承诺 API。 await
只能在 async
函数内部使用,但任何 return 的承诺都可以等待。
function foo() {
return new Promise(resolve => {
setTimeout(() => resolve(42), 3000);
});
}
async function bar() {
let answer = await foo();
console.log(answer);
return answer * 2;
}
bar().then(result => console.log(result));
请记住,这是一项实验性功能,它的工作方式可能会随着时间的推移而改变。
我如何创建一个 "data = xhrLoad(url)" 内部异步但 w/o .then 或回调 "hell" 的函数?我希望 xhrLoad 发挥 Promise/Generator 魔力,但只有在数据可用时才 return。
示例:
data = initMyProgram(); // may call data = xhrLoad(url)
<use data here>
<more inline code here>
我意识到 Promise 很棒,.then/.catch 很复杂..但我想要内联的顺序代码..如果数据可用,甚至可能不需要的代码片段 w/o 外部资源。
Ex:在 webgl 编程中,着色器可以在 <scripts>
、外部文件、es6 模块、es6 模板字符串等中。如果需要,我想通过 xhr 请求来神奇地管理它在 initMyProgram returns.
虽然在 ES6 中可以做到,但不一定很方便。但是有几个blog posts,按照它们应该很简单。
有一个提案 async/await
for ES7. Babel 已经支持。
请注意,async/await
只是处理 promise 的语法糖。声明为异步的函数总是 return 一个承诺,因此在顶层你仍然必须使用承诺 API。 await
只能在 async
函数内部使用,但任何 return 的承诺都可以等待。
function foo() {
return new Promise(resolve => {
setTimeout(() => resolve(42), 3000);
});
}
async function bar() {
let answer = await foo();
console.log(answer);
return answer * 2;
}
bar().then(result => console.log(result));
请记住,这是一项实验性功能,它的工作方式可能会随着时间的推移而改变。