在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);
})

执行结果:

posted on 2017-10-16 00:28  sandy.simple  阅读(203)  评论(0编辑  收藏  举报