vue中返回结果是promise的处理方式
返回结果是promise的处理
调用element-ui中提供的方法是，经常返回结果类型对象是promise，
如果某个函数调用的结果打印后返回的是promise，就马上用saync和await进行优化，async放到方法名称的前面，await放到方法里面
对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
<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方法。
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: 4562.async await
Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的。此外，只要在函数前面加上async 关键字，也可以指明函数是异步的。
async关键字实际是通过Promise实现，如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误，那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数（比如内部含有primise），该函数应用async修饰。
await表示“等待”，修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
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请求，等待得到结果再往下进行，如：
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
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
