JavaScript promise概述和使用方法

109 阅读2分钟

ES6的promise的概述

MDN给出的描述
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。
它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。
这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise   

一.新建promise对象

//Promise类用一个函数做参数,做参数的函数又有两个参数(而这两个参数也是函数)
let promise = new Promise((resolve, reject) => {
          resolve(); // resolve 表示成功的回调
          reject(); // reject 表示失败的回调
        })
       .then(() => { //成功的函数
        })
        .then(() => { //成功的函数
        })
        .then(() => { //成功的函数
        })
        .catch(() => { //失败的函数,可以省略
        });
        then和catch是实例方法,原型方法

二. promise的应用

1.Promise 代表一个异步操作,有三种状态:pending进行 fulfilled(resolve)成功、rejected失败。

2.Promise对象的状态改变有两种可能:从pending变为fulfilled和从pending变为rejected。

3.对象的状态不受外界影响,一旦状态设定,就不会再变。

    let promise = new Promise((resolve, reject) => {
        //自由设定状态,要么resolve要么reject
    resolve('resolve参数可以传递给then里面的回调'); //设定状态为         成功,一旦状态设定,就不会再变,不管下面的状态,结果一定是成功的
        // reject(); //设定状态为失败
    }).then((str) => { //一旦状态设为成功,执行这里的then,resolve状         态回调里面的参数传递给then
        console.log(str);
        console.log('我是then');
    }).catch(() => { //一旦状态设为失败,执行这里的catch,reject状态         回调里面的参数传递给catch
        console.log('我是catch');
    });

三. promise的异步,then是异步的

    console.log(1);
    let promise = new Promise((resolve, reject) => {
    console.log(2);
    resolve();
    }).then(() => {
        console.log(3);
    }).then(() => {
        console.log(4);
    }).then(() => {
        console.log(5);
   }).then(() => {
        console.log(6);
    });
    console.log(7);
    输出顺序:1,2,7,3,4,5,6

四.promise改写回调函数

传统回调函数

     function fn(cb) { //cb传入的函数
         setTimeout(() => {
             const arr = ['zhangsan', 'lisi', 'wangwu'];
             cb(arr); //调用函数  arr是cb函数的实参
         }, 0);
     }
     fn(function(data) { // 形参data:接收cb传来的实参
         console.log(data); // ['zhangsan', 'lisi', 'wangwu']
     });

promise改写回调函数

 function fn() {
     let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
           const arr = ['zhangsan', 'lisi', 'wangwu'];
           resolve(arr);
         // reject('我错了');
        }, 0);
      });
      return promise;//返回值是promise
    }
    // promise的then链式调用,说明每一个then又会返回一个promise对象
        fn()
        .then(data => {
            console.log(data); //['zhangsan', 'lisi', 'wangwu']
            return new Promise((resolve, reject) => {
                resolve('第一个then里面的resolve值')
            });
     })
        .then(data => {
            console.log(data); //这里的then获取的是上一个then返回的promise对象里             面resolve返回的值
            return new Promise((resolve, reject) => {
                resolve('第二个then里面的resolve值')
            });
     })
        .then(data => {
            console.log(data);
            return new Promise((resolve, reject) => {
                resolve('第三个then里面的resolve值')
            });
     })
        .then(data => {
           console.log(data);
     })
        .catch(err => {
            console.log(err);
     });