当试图在react-native中使用async/await时,我收到以下错误:
uncaught error Error: SyntaxError: /Users/senthilsivanath/Documents/MusicTulip/index.ios.js: Unexpected token (50:23)
48 | renderScene: function(route,nav) {
49 | try {
50 | const response = await signIn.isLoggedIn();
Run Code Online (Sandbox Code Playgroud)
我的.babelrc档案是:
{ "presets": ["react-native", "es2015", "babel-preset-stage-3"] }
Run Code Online (Sandbox Code Playgroud) 目前,在JavaScript中处理一系列异步结果的唯一稳定方法是使用事件系统.但是,正在开发三种替代方案:
流:https
:
//streams.spec.whatwg.org Observables:https:
//tc39.github.io/proposal-observable Async Iterators:https://tc39.github.io/proposal-async-iteration
每个事件和其他事件的差异和好处是什么?
这些中的任何一个是否打算取代事件?
我看到babel.js装饰器(在"第1阶段"中可用)在https://github.com/wycats/javascript-decorators上实现了规范.看起来装饰器仅限于(1)类,(2)访问器和(3)方法.在我的例子中,我想在普通的旧函数上使用装饰器,如
@chainable
function foo() { }
Run Code Online (Sandbox Code Playgroud)
在哪里(只是一个例子)
function chainable(fn) {
return function() {
fn.apply(this, arguments);
return this;
};
}
Run Code Online (Sandbox Code Playgroud)
我没有看到装饰器不能应用于函数的任何逻辑原因.我的问题是,有没有办法实现这一目标?还是有一些很好的理由为什么功能无法装饰?
事实证明,在https://github.com/wycats/javascript-decorators/issues/4上存在一个问题.
javascript decorator babeljs ecmascript-next javascript-decorators
似乎有一些问题将async/await与.reduce()结合起来,如下所示:
const data = await bodies.reduce(async(accum, current, index) => {
const methodName = methods[index]
const method = this[methodName]
if (methodName == 'foo') {
current.cover = await this.store(current.cover, id)
console.log(current)
return {
...accum,
...current
}
}
return {
...accum,
...method(current.data)
}
}, {})
console.log(data)
Run Code Online (Sandbox Code Playgroud)
该data对象被记录之前的this.store完成...
我知道你可以使用Promise.all异步循环,但这适用于.reduce()?
我是nodejs的新手.我没有看到前1中的响应,但我在前2中看到了.为什么?等待使用babel在其他地方为我工作.
例1
let res = await request(url)
console.log(res);
console.log(res.body);
Run Code Online (Sandbox Code Playgroud)
例2
request(url, function (error, res, body) {
if (!error && response.statusCode == 200) {
console.log(body)
}
});
Run Code Online (Sandbox Code Playgroud)
等待在其他地方工作,我正在使用babel和es6和es7功能所需的模块.例如,await在squelize call中工作,我验证了.但它不适用于请求调用.为什么?
这是我现在已经做了很长时间的方式了:
export default class AttachmentCreator extends Component {
render() {
return <div>
<RaisedButton primary label="Add Attachment" />
</div>
}
}
AttachmentCreator.propTypes = {
id: PropTypes.string,
};
Run Code Online (Sandbox Code Playgroud)
但我看到有人这样做:
export default class AttachmentCreator extends Component {
static propTypes = {
id: PropTypes.string,
};
render() {
return <div>
<RaisedButton primary label="Add Attachment" />
</div>
}
}
Run Code Online (Sandbox Code Playgroud)
事实上,我已经看到人们在构造函数之外设置初始状态.这是好习惯吗?这一直困扰着我,但我记得在某个地方有人说将默认道具设置为静态不是一个好主意的讨论 - 我只是不记得原因.
我正在使用ReactJS与Babel和Webpack以及使用ES6以及箭头函数的建议类字段.我理解箭头函数通过不重新创建每个渲染的函数来使事情更有效,类似于构造函数中的绑定方式.但是,如果我正确使用它们,我并不是100%确定.以下是我的代码在三个不同文件中的简化部分.
我的代码:
Main.js
prevItem = () => {
console.log("Div is clicked")
}
render(){
return (
<SecondClass prevItem={this.prevItem} />
)
}
Run Code Online (Sandbox Code Playgroud)
SecondClass.js
<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />
Run Code Online (Sandbox Code Playgroud)
ThirdClass.js
<div onClick={()=>{this.props.onClick()}}>Previous</div>
Run Code Online (Sandbox Code Playgroud)
题:
上面的代码是否正确使用箭头功能?我注意到对于SecondClass.js我也可以使用:
<ThirdClass type="prev" onClick={this.props.prevItem} />
Run Code Online (Sandbox Code Playgroud)
由于我在原始函数定义中使用了ES6箭头函数,因此一种方法或另一种方法之间是否存在差异?或者我应该一直使用箭头语法直到我的最后一个div?
javascript ecmascript-6 reactjs arrow-functions ecmascript-next
async function update() {
var urls = await getCdnUrls();
var metadata = await fetchMetaData(urls);
var content = await fetchContent(metadata);
await render(content);
return;
}
//All the four functions return a promise. (getCdnUrls, fetchMetaData, fetchContent, render)
Run Code Online (Sandbox Code Playgroud)
如果我们想在任何时间从外部中止序列怎么办?
比如,当执行fetchMetaData时,我们意识到不再需要渲染组件,我们想要取消剩余的操作(fetchContent和render).消费者有没有办法从外面中止/取消?
我们可以在每次等待一个条件后检查,但这似乎是一种不太优雅的方式.它仍然会等待当前的操作完成.
ES6/ES7 中已经有很多很酷的功能来定义Javascript对象.但是,以下模式在Javascript中很常见:
const obj = {
requiredKey1: ...,
requiredKey2: ...
};
if (someCondition) {
obj.optionalKey1 = ...;
}
Run Code Online (Sandbox Code Playgroud)
有没有办法用可选键和必需键同时定义对象?
假设我们有对象数组.
调用Object.assign(...array)在具有索引的对象i覆盖具有索引的对象中的现有属性的那些对象之间进行继承i-1
例如:
var array=[{interf:'IPerson',name:'Someone'},{clss:'Person',name:'Ahmed'},{student:true}];
console.log(
Object.assign(...array) // Object.assign(array[0],array[1],array[2])
)Run Code Online (Sandbox Code Playgroud)
现在,使用Babel和建议的对象扩展语法,我们可以静态地执行此操作:
{...array[0],...array[1],...array[2]} // spread used for each object not for array
Run Code Online (Sandbox Code Playgroud)
如何动态地做到这一点?
"扩散语法"的上下文重叠.我的意思是如何使用扩展语法:
{}进行继承?
我试着{...array}和它返回{0:<array[0]>,1:<array[1]>,2:<array[2]>}它不是作为输出相同Object.assign(...array).
ecmascript-next ×10
javascript ×7
async-await ×3
babeljs ×3
ecmascript-6 ×2
promise ×2
reactjs ×2
asynchronous ×1
cancellation ×1
class ×1
decorator ×1
dom-events ×1
ecmascript-7 ×1
iterator ×1
node.js ×1
observable ×1
react-native ×1
reduce ×1
stream ×1