Promise的用法

首先,我们要知道什么是Promise呢,Promise就是把异步处理和处理规则进行规范化,简化了我们的程序,可以不想以前执行的时候层层的回调函数,让我们看起来很难受.

// 例如以前 那我们不是要写很多回调函数 ,不用你说,你自己看着头晕, 别人看你的代码也会头晕 代码的维护性也很差
let admin= function(params, callback){
  store.getToken(function(err, tokens){
    if ( err ) { callback(err); return; }
    store.get(function(err, apiServices){
      if ( err ) { callback(err); return; }
    });
  });
};

好了,下面让我们正式开始学习Promise的用法吧

Promise创建的时候有三个状态,Pending,Resolve,Reject， Promise从最开始的Pending状态,会根据程序是成功还是失败,而相应的进入resolve和reject中.

让我们开始第一个实例吧

function getUrl(url) {
	return new Promise((resolve, reject) => {
		let req = new XMLHttpRequest();
		req.open("GET", url, true);
		req.onload = function () {
			if (req.status == 200) {
				resolve(req.responseText);
			} else {
				reject(new Error(req.statusText));
			}
		}
		req.onerror = function () {
			reject(new Error(req.statusText));
		}
		req.send();
	});
}

// 下面是运行的实例
let url = "http://xxx.com";
getUrl(url).then((resolve) => {
	console.log(resolve);        // 获取到里面的内容
}).catch((err) => {
	console.log(err);               // 打印出错误的信息
});

promise 可以进行链式调用 例如

let promise = new Promise((resolve, reject) => {
	resolve(3);  // 记住promise中一定要调用resolve方法,否则 promise毫无作用
});

promise.then((resolve1) => {
	console.log(resolve1); 	// 3
	return resolve1 * 2;
}).then((resolve2) => {
	console.log(resolve2);  // 6   这个会拿到上一次then里面的返回值
});

我们应该知道每次promise的then方法都会返回一个新的promise,下面的例子,就可以看出和上面的区别了

let aPromise = new Promise(function (resolve) {
 resolve(100);
});
aPromise.then(function (value) {
 return value * 2;
});
aPromise.then(function (value) {
 console.log("result:  " + value);    //  result: 100  
})

如果我们的promise中出现了错误 则直接进入catch方法,中途的then是不会调用的

function taskA() {
  console.log("Task A");
  throw new Error("throw Error @ Task A")
}
function taskB() {
  console.log("Task B");// 不会被调用
}
function onRejected(error) {
  console.log(error);   // => "throw Error @ Task A"
}
function finalTask() {
  console.log("Final Task");
}
let promise = Promise.resolve();
  promise.
  then(taskA).
  then(taskB).
  catch(onRejected).
  then(finalTask);

Promise.all 的方法,all的作用是等待所有程序完成之后在返回,在promise中所有的程序都是同时开始的,没有先后顺序之分

function time(delay) {
	 return new Promise(function (resolve) {
		 setTimeout(function () {
		 	resolve(delay);
		 }, delay);
	 });
}
// 定义这个只是让更清楚,all里面的方法是同时执行的
let startTime = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
 time(6),
 time(66),
 time(666),
 time(6666)
]).then(function (values) {
 console.log(Date.now() - startTime + 'ms');
 // 約 6666ms
 console.log(values); // [6,66,666,6666]
});

既然我们有同时一起完成的,那么肯定就有最先完成的,没错,promise给我们提供了race方法,请看下面的例子吧

function time(delay) {
	 return new Promise(function (resolve) {
		 setTimeout(function () {
		 	resolve(delay);
		 }, delay);
	 });
}

// 定义这个只是让更清楚,race里面的方法是 只要一个执行完成就会进入then方法里面去
let startTime = Date.now();
// 所有promise变为resolve后程序退出
Promise.race([
 time(6),
 time(66),
 time(666),
 time(6666)
]).then(function (values) {
// 约 6ms
 console.log(Date.now() - startTime + 'ms');
 console.log(values); // [6]
});

Promise.race 在第一个promise对象变为resolve之后，并不会取消其他promise对象的执行。

let xiaoBai= new Promise(function (resolve) {
	 setTimeout(function () {
		 console.log('this is xiaoBai');
		 resolve('this is xiaoBai');
	 }, 4);
 });
let xiaoHei= new Promise(function (resolve) {
	 setTimeout(function () {
		 console.log('this is xiaoHei');
		 resolve('this is xiaoHei');
	 }, 1000);
 });
 
// 第一个promise变为resolve后程序停止,但是不影响其他的promise
Promise.race([winnerPromise, loserPromise]).then(function (value) {
 console.log(value); //  4ms后输出=>'this is xiaoBai'  1000m后输出 => this is xiaoHei
});

例如, 我们在vue使用Promise,方法如下

const store = new Vuex.Store({
    state: {
      // ...
    },
    mutations: {
        // 设置登录
        login (payload) {
            //...
        }
    },
    actions: {
		// 异步提交登录的方法
		submitLogin({commit}, payload) {
			// 这里我们就可以使用Promise 来异步的操作
			return new Promise((resolve, reject) => {
				// 异步执行调用接口
				commit("login", payload);
				// 一直要执行 resolve() 这个方法,不然Promise就没有意义了
				resolve({//这里写返回的结果});
				//如果发生错误了 也可以写reject 在methods里面用 try catch 捕获
			})
		}
	}
});

在vue的methods方法里
<script>
	export default {
    // ...
    methods: {
        async handleLogin() {
        	// 这里就可以用es7 语法的 async awite 等待结果了
        	// 如果在actions 里面写了 reject 错误处理 那么这里就可以使用 try catch 来捕获一下做相应的处理
        	 try {
        	    // 这里拿到的就是 Promise resolve() 里面的值
                 const result = awite this.$store.dispath("submitLogin");
            } catch (error) {
                // 做一些错误的处理
                //...
                console.log(error);
            }
        },
    },
};
<script>

好了,大概常用的方法就是这些了,如果有任何问题,欢迎指出哦,一起进步,哈哈哈.