这篇文章主要介绍“JavaScript Promise与async、await有什么作用”，在日常操作中，相信很多人在JavaScript Promise与async、await有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript Promise与async、await有什么作用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
都是为了解决异步回调产生的。
Promise的字面意思是“承诺”，即承诺会执行。Promise好比容器，里面存放着一些未来才会执行完毕的事件的结果，而这些结果一旦生成是无法改变的。
async和await遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
底层代码是怎样的？
promise的精髓是状态的传递，方法的封装者并不需要关心异步方法的执行结果，方法的封装者通过状态传递拿到执行结果书写自己的逻辑，使得封装者与使用者的真正解耦。
这种状态传递有种发布订阅的味道，回调地狱并非书写上的地狱而诟病，promise 的链式调用也会有地狱之感，而回调地狱真正为之诟病的是没有真正解耦。async 是 promise 的语法糖。
在之前没有promise的时候，我们处理多个异步请求回调是一层一层嵌套的，第一个函数的输出是第二个函数的输入，比如：
ajax.get(url, function(id) {
ajax.get({id}, function() {
ajax.get({name}, function() {
......
})
})
})如果业务逻辑复杂，且基本上我们对于请求回来的数据还得做一系列的处理，这样的代码对于后期的可阅读性和可维护性都十分不友好，那么promise的链式调用就解决了多层异步嵌套回调的问题，且代码可读性和可维护性都会提高。
promise有三种状态pending、fulfilled、reject
new Promise调用的时候需要传入一个executor执行器函数，该函数会立即执行；
executor函数接收两个参数，resolve，reject，分别对应异步请求成功执行和失败执行；
设置默认状态stratus为pending，请求成功状态下的值为value，默认值为undefined，请求失败下的值为reason，默认值为unfined
promise的状态值只能从pending -> fulfilled 或者 pending -> reject，状态一旦确定就不会再改变
promise有一个then方法，接收两个参数onFulfilled、onRejected，分别为异步请求成功的回调和失败的回调。
promise的使用
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = () =>
getJSON()
.then(data => {
console.log('data==>', data)
return 'done'
})
.catch(err => {
console.log('err==>', err)
})
makeRequest()要理解async函数，首先得来了解一下Generator函数。因为 async和await遵循的是 Generator 函数的语法糖
Generator函数生成器的理解：
是es6引入的一个数据类型，相当于一个状态机，内部封装了很多状态，同时返回一个迭代器对象。可以通过这个迭代器遍历相关的值和状态。
Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。
async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。
async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。使用async / await关键字就可以在异步代码中使用普通的try / catch代码块。
await关键字只在async函数内有效。如果你在async函数体之外使用它，就会抛出语法错误 SyntaxError 。
async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。
async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。
Async/Await的使用
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = async () => {
const value = await getJSON()
console.log(value)
return value
}
makeRequest()Promise 是应用层的解决方案，它有一个规范，不同的语言也可以实现，它只能异步的处理错误，在js 里它本质上是一个对象。
async-await 是语言层的解决方案，它可以说是 Promise的补充，可以让用户像编写同步代码一样编写异步代码，通过try-catch 可以同步地处理错误。
Promise 更多应用在函数封装中，async用在函数的使用中。
Promise链式调用相当于一个新的回调地狱， 也不能统一处理异常。 Promise 本身是同步函数，多个不会等待。
async-await用同步的写法使得可读性更强，同时方便 try-catch 捕获异常， async-await 有明确的前后关系，可读性好。
到此，关于“JavaScript Promise与async、await有什么作用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
