标签：异步 resolve 函数 vue promise 详情 reject Promise
vue中Promise的使用方法详情
目录
简介:
promise是什么，它可以说是异步编程的一种解决方法，就拿传统的ajax发请求来说，单个还好，如果是一个请求回来的数据还要被其他请求调用，不断地嵌套，可想而知，代码看起来是很乱的，promise主要是为了解决这种情景而出现的。
一、使用
1.promise是一种异步解决方案
- 由于ajax异步方式请求数据时，我们不能知道数据具体回来的事件，所以过去只能将一个callback函数传递给ajax封装的方法，当ajax异步请求完成时，执行callback函数。
- promise对象接受resolve和reject两个参数，当一个异步动作发生时，promise对象会通过resolve完成对动作成功进行解析，reject会捕获这个动作的异常。一个
promise对象，通过new Promise().then()执行下一步骤操作。 axios is a promise based HTTP client for the browser and node.js。也就是说，使用axios发出请求，难免涉及promise。
Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的。Promise中的函数的第一个参数是回调函数，resolve用来触发then里面的代码，第二个参数是回调函数，reject用来触发catch中的代码，throw new Error();也可以触发catch，
resolve和reject是两个回调函数，调用resolve会触发then，reject会触发catch：
?| 123456789101112131415 | <script>new Promise((resolve, reject) =>{ setTimeout(() =>{ //成功的时候调用resolve resolve('成功data') //失败的时候调用reject reject('error message') }, 1000)}).then((data) =>{ //处理成功后的逻辑 console.log(data);//这个data 是接收的resolve参数--}).catch((err) =>{ console.log(err);})</script> |
- 在一个
promise链中，只要任何一个promise被reject，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法。
| 12345678910111213141516171819202122232425262728 | p1().then(p2).then(p3) .then(function(data) { console.log('data: ' + data); }) .catch(function(error) { console.log('error: ' + error); }); function p1() { return new Promise(function(resolve, reject) { console.log('p1 resolved'); resolve(123); });} function p2() { return new Promise(function(resolve, reject) { console.log('p2 rejected'); reject(456); });} function p3() { return new Promise(function(resolve, reject) { console.log('p3 resolved'); resolve(789); });}// 执行结果p1 resolvedp2 rejectederror: 456 |
2.async await
Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的。此外，只要在函数前面加上async 关键字，也可以指明函数是异步的。
async关键字实际是通过Promise实现，如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误，那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数（比如内部含有primise），该函数应用async修饰。
await表示“等待”，修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
?| 1234567891011 | function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } )}//写一个async 函数，从而可以使用await 关键字， await 后面放置的就是返回promise对象的一个表达式，所以它后面可以写上 doubleAfter2seconds 函数的调用async function testResult() { let result = await doubleAfter2seconds(30); console.log(result);} |
await 等待后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回。显然await可以修饰axios请求，等待得到结果再往下进行，如：
| 123456789 | async getUserList(){ const {data: res} = await this.$http.get('users', { params: this.queryInfo }) //console.log(res) if (res.meta.status !== 200) return this.$message.error('获取用户列表失败! ') this.userlist = res.data.users this.total = res.data.total } |
到此这篇关于vue中Promise的使用方法详情的文章就介绍到这了,更多相关vue中Promise的用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
标签：异步,resolve,函数,vue,promise,详情,reject,Promise 来源： https://www.cnblogs.com/sunny3158/p/16647528.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。