详解vue中watch如何使用?watch用法介绍_WEB前端开发
Vue.js是一套构建用户界面的渐进式框架。
在vue中,使用watch来响应数据的变化;watch的用法大致有三种,下面给大家介绍一下。
受到Zeit团队博文的启发,我们的PayPal团队不久之前将服务器端数据库迁移到了Async/Await上。
我想要和你们分享一下我的经验。
首先我们先来了解两个术语:
- Async函数
- Await 关键词
你们总是将Async和Await放在一起说,但是你需要知道的是,它们是两个不同的东西。
对于Async函数和Await关键词,你需要了解的是,他们从某种程度上来说当然是有一定关联的,但是在没有Await的情况下,Async函数依然可以使用。
相关学习推荐:javascript视频教程
函数会返回一个Promise
当你用async关键词创建一个函数的时候,这个函数永远都会返回一个Promise。
当你在async函数内部进行返回的时候,它会用一个Promise包裹你的值。
// here is an async function async function getNumber() { return 4 // actually returns a Promise } // the same function using promises function getNumber() { return Promise.resolve(4) }
Async函数和它的基于Promise的Equivalent
除了将你的return转换为Promise之外,async函数还有一个特别之处,那就是它是唯一一个让你使用await关键词的地方。
Await让你可以暂停async函数的执行,直到它受到了一个promise的结果。
这让你可以写出按照执行顺序显示的async代码。
必备的12个JavaScript技巧_WEB前端开发
在这篇文章中将给大家分享12个有关于JavaScript的小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,一起收纳学习吧。
// async function to show user data async function displayUserData() { let me = await fetch('/users/me') console.log(me) }// promise-based equivalent function displayUserData() { return fetch('/users/me').then(function(me) { console.log(me) }) })
Await允许你在不需要callback的情况下写异步代码。
这样做的好处是让你的代码可读性更高。
而且await可以与任何promise兼容,而不仅仅是用async函数所创建的promise。
在Async函数中处理错误
因为async函数也是一个Promise,当你在代码中放入一个async函数的时候,它会被吸收,然后作为rejected Promise被返回。
// basic error handling with async functions async function getData(param) { if (isBad(param)) { throw new Error("this is a bad param") } // ... } // basic promise-based error handling example function getData(param) { if (isBad(param)) { return Promise.reject(new Error("this is a bad param")) } // ... }
当你使用await调用Promise的时候,你可以用try/catch
将其包裹,或是你需要在返回的Promise中添加一个catch handler。
// rely on try/catch around the awaited Promise async function doSomething() { try { let data = await getData() } catch (err) { console.error(err) } } // add a catch handlerfunction doSomething() { return getData().catch(err => { console.error(err) }) }
整合
利用好promise的错误处理属性,以及async函数的简洁语法,能够给你带来一些强大的能力。
在下面这个简单的例子中,你会看到我是如何利用async函数内在的错误处理能力的,它让我简化了Express应用中的错误处理流程。
// catch any errors in the promise and either forward them to next(err) or ignore them const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next) const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next()) // wrap my routes in those helpers functions to get error handling app.get('/sendMoney/:amount', catchErrors(sendMoney)) // use our ignoreErrors helper to ignore any errors in the logging middleware app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse) // controller method can throw errors knowing router will pick it up export async function sendMoney(req, res, next) { if (!req.param.amount) { throw new Error('You need to provide an amount!') } await Money.sendPayment(amount) // no try/catch needed res.send(`You just sent ${amount}`)} // basic async logging middleware export async function logSomething(req, res, next) { // ... throw new Error('Something went wrong with your logging') // ... }
此前,我们一直都在用next(err)
来处理错误。
然而,有了async/await
,我们可以将错误放在代码中的任何位置,然后router会将这些错误throw到Express提供的next函数中,这样就极大的简化了错误处理流程。
我用了几个小时的时间对数据库进行了迁移。
要想使用这个方式,你唯一需要的,就是对Promise的深刻理解,以及学会如何设置babel。
以上就是理解JavaScript之Async/Await的新语法的详细内容,更多请关注ki4网其它相关文章!
学习JavaScript地理位置信息API_WEB前端开发
在浏览器里用JavaScript获取地理位置信息API在很多移动应用里是最常见的API运用,作为Web程序员,它应该是你必须具备的一项知识技巧,幸运的是,目前所有流行的浏览器都支持了这种技术。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)