js异步操作-uniapp为例+console的一些用法

Promise 是抽象的异步处理对象

构造方法：

let promies = new Promise((resolve, reject) => {
 resolve(); //异步处理 
});

Promise 有三个状态：

1. Fulfilled: has-resolved, 表示成功解决，这时会调用 onFulfilled.
2. Rejected: has-rejected, 表示解决失败，此时会调用 onRejected.
3. Pending: unresolve,表示待解决，既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态.

上面我们提到 Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject.

• resolve函数的作用是，将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved)，
  在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
• reject函数的作用是，将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected),
  在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise 实例生成以后，可以用 then 方法和 catch 方法分别指定 resolved 状态和 rejected 状态的回调函数。

代码示例：

下面通过样例作为演示，我们定义做饭、吃饭、洗碗（cook、eat、wash）这三个方法，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作）

<script>
	export default {
		data(){
			return{
			};
		},
		onLoad() {
			//清除控制台打印的数据
			console.clear()
			var arr = [];
			//计时
			console.time("test")
			for(let i = 0;i < 1000000;i++){//向数组当中添加1000000个值
			    arr.push(i)
			}
			//计时结束
			console.timeEnd("test")
			//计数
			console.count()
			console.count()
			console.count("test")
			console.count("test")
			console.count()
			//打印错误信息
			console.error('error :参数a或b不可以为字符串')
			//打印警告信息
			console.warn('error :参数a或b不可以为字符串')
			//绘制表格
			console.table([{ a: 1, b: 'Y' }, { a: 'Z', b: 2 }]);
			//定制控制台打印的数据样式
			console.log(`%c你好，这里是靠浦易通!!!`,'font-size: 40px; color: orange;')
			console.log('%c你好                                                                             ',
			'font-size: 20px;background: url("http://nowre.com/uploads/feature/feature_header_1435686903_FEATURE-TOP17.jpg"); background-size: 100%;');
			//调用异步操作
			this.doSomethings();
		},
		methods:{
			//做饭
			cook(){
			    console.log('开始做饭。');
			    var p = new Promise(function(resolve, reject){        //做一些异步操作
			        setTimeout(function(){
			            console.log('做饭完毕！');
			            resolve('鸡蛋炒饭');
			        }, 1000);
			    });
			    return p;
			},
			 
			//吃饭
			eat(data){
			    console.log('开始吃饭：' + data);
			    var p = new Promise(function(resolve, reject){        //做一些异步操作
			        setTimeout(function(){
			            console.log('吃饭完毕!');
			            resolve('一块碗和一双筷子');
			        }, 2000);
			    });
			    return p;
			},
			wash(data){
			    console.log('开始洗碗：' + data);
			    var p = new Promise(function(resolve, reject){        //做一些异步操作
			        setTimeout(function(){
			            console.log('洗碗完毕!');
			            resolve('干净的碗筷');
			        }, 2000);
			    });
			    return p;
			},
			//链式调用
			doSomethings(){
				this.cook()
				.then(this.eat)
				.then(this.wash)
				.then(function(data){
				    console.log(data);
				});
			}
		}
	};
</script>

运行结果

解释：上述构造方法中的两个参数resolve, reject即是改变promise的状态，resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调​，resolve, reject可抛出结果，作为then方法中函数的参数。then可接受两个参数，第一个处理Resolved状态的函数，第二个处理Rejected函数。如果只想处理成功，或者失败，对应参数可设置为null,只有一个参数则表示状态改变就执行，不区分状态结果。

另外

• catch()方法，它可以和 then 的第二个参数一样，用来指定 reject 的回调，另一个作用是，当执行 resolve
  的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch
  方法中。
• all()方法，Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调,
  会把所有异步操作的结果放进一个数组中传给 then。
• race()方法，race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all
  是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

异步操作参考这里
console用法参考这里