在promise前之前先插一下es6开发环境搭建,参考了网上的一篇博客。不搭建es6的开发环境,有的浏览器会报错,如下:
es6开发环境搭建
1.建立一个项目,并在项目下建立两个文件夹src,dist
src:存放将要编写es6代码的文件。写的js程序放在里面。比如建立index.js
dist:存放将es6转化成es5的文件。在html文件中药引用这里的js文件。比如建立index.js
2.在编写的跟目录下建一个index.html文件,引入js文件是<script src = "./dist/index.js"></script>
3.初始化项目。在安装babel之前,先要你nom init 初始化我们的项目。打开终端或者通过cmd命令进入到跟目录(最简单的办法:右击根目录的同时按住shift键,点击在此处打开命令窗口(w)),输入一下命令:npm init -y
-y表示默认全部同意,不用一一回车了,执行完命令会生成一个package.json文件。将"test": "echo \"Error: no test specified\" && exit 1" 去掉添加 "build": "babel src/index.js -o dist/index.js"。
4.全局安装babel-cli。输入cnpm install -g babel-cli
5.本地安装 babel-preset-es2015 和babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
安装完成后会多一个devDependencies选项
6.在跟目录下新建 .babelrc文件,并且录入以下代码:
{ "presets":[ "es2015" ], "plugins":[] }
.babelrc是一个隐藏文件,在window系统里创建不了,提示必须输入文件名。如何创建:win7及以上系统,命名文件时输入.babelrc. 即可得到.babelrc。
7.输入命令:babel src/index.js -o dist/index.js,或者npm run build ,就可以成功将es6转化成es5了。
关于全局安装本地安装:参考
http://www.cnblogs.com/PeunZhang/p/5629329.html#install-local
Promise
Promise相关学习链接:http://es6.ruanyifeng.com/#docs/promise
写在前面的:
js的同步异步指得是什么?
异步指的是:代码执行不按顺序,“跳过执行”,待某些代码执行完成后,再来执行。
同步指的是:代码依次执行。
js Promise 代码同步和异步的区别:
promise是用来异步操作的。有时候一个异步操作要等待其他异步操作完成才能完成,这时可用then。
异步:相对于js文件的其他代码块,执行这些代码块的时候也在执行promise;同步相对于promise内部的代码块是同步的,也就是说,我们只要new一个Promise,Promise构造函数中的传入的函数的参数就是最高优先级执行,一直到new出一个Promise对象实例,后面的.then()方法才会执行。链上的.then()会等到前面的promise执行有了结果才能执行。
promise是一种异步编程的解决方案。比传统的解决方案--回调函数和事件--更合理和强大。
promise,简单说是一种容器,里面保存着某个未来才能结束的事件(通常是一个异步操作)的结果。从语法说,promise是一个对象,从它可以获取的异步操作的消息。promise提供了统一的API,各种异步操作都可以用同样的方法进行处理。
console.dir(Promise);
打印后可以看到,Promise是一个构造函数,自己身上有all,resolve,reject的方法,原型上有then,catch的方法。
var promise = new Promise(function(reslove,reject) { // ......some code if(/*异步操作成功*/){ reslove(value); }else{ reject(error); } })
♥ 注意:用Promise时一般是包在一个函数中,需要的时候运行这个函数。
Promise构造函数接收一个参数,是函数,传入两个参数,resolve,reject,分别表示异步执行成功后的回调函数和异步执行失败后的回调函数。
then方法可以接收两个回调函数作为参数,一个是回调函数是promise的状态 变成resolve时调用,一个是状态变成reject时的调用。其中第二个参数是可选的,不一定要提供。
function runAsync1() { return new Promise(function (resolve,reject) { console.log("异步执行1"); resolve("数据1"); }); } function runAsync2() { return new Promise(function (resolve,reject) { console.log("异步执行2"); resolve("数据2"); }); } function runAsync3() { return new Promise(function (resolve,reject) { console.log("异步执行3"); resolve("数据3"); }) } runAsync1().then(function (data) { console.log(data); return runAsync2(); }).then(function (data) { console.log(data); return runAsync3(); }).then(function (data) { console.log(data); });
执行结果:
如果在then方法中return 一个数据而不是Promise对象,后面的then直接接收数据
runAsync1().then(function (data) { console.log(data); return runAsync2(); }).then(function (data) { console.log(data); return '一个数据'; }).then(function (data) { console.log(data); });
执行结果:
.catch() ,实际上和then的第二个参数一样,指定reject的回调
function tel(num) { return new Promise(function (resolve,reject) { if(num ==159){ resolve(num); } else{ reject('num is wrong'); } }); } tel(156).then(function (number) { console.log(number); }).catch(function (str) { console.log(str); }) //执行结果是:num is wrong 若改变成 tel(159).then(function (number) { console.log(number); }).catch(function (str) { console.log(str); }) //执行结果是:159
all()用法:Promise的all方法提供了并行异步操作的能力,并在所有的异步操作完成之后才能执行回调函数。
function runAsync1() { return new Promise(function (resolve,reject) { console.log("异步执行1"); resolve("数据1"); }); } function runAsync2() { return new Promise(function (resolve,reject) { console.log("异步执行2"); resolve("数据2"); }); } function runAsync3() { return new Promise(function (resolve,reject) { console.log("异步执行3"); resolve("数据3"); }) } Promise.all([runAsync1(),runAsync2(),runAsync3()]).then(function (reson) { console.log(reson); })
执行结果: