es6 中的 Promise 和 es7 中 async..await

 /**
   *
   * Promise 对象
   * 作用：
   * 是异步编程的一种解决方案，主要是为了解决es5的地狱回调和callback回调函数的
   *
   * 异步操作，在前端用的最多的就是 ajax对接后台数据，定时器操作了
   *
   */

先看一下es5的callback 回调函数的实例


  //  回调函数求和
  function add(a, b, callback) {
    if (typeof callback === 'function') {
      if (a && b) {
        let result = a + b;
        return callback(result);
      } else {
        return callback('缺少参数');
      }
    }
  }
  // 调用函数
  add(1, 2, function(a) {
    // console.log(a)    // => 3
  });

在这里插入图片描述
看一个例子
这里用var 命名的变量，会进行变量提升, 结果都是 2; 不明白的打个断点调试一下

/**
 	异步操作，我们知道js是单线程的，说的是它的代码执行时，
	js中代码执行时，先执行同步线程，遇到异步代码，
	会先将异步的线程挂起来，继续走同步线程，等所有的同步线程执行完之后，
	再去走刚才挂起的异步线程,
*/
  for (var index = 0; index < 2; index++) {
    console.log('我在执行' + index + '次');
    setTimeout(function() {
      console.log('我在setTimeout之中:' + index);
    }, 100);
    console.log('我在执行异步代码之后的打印');
  }
  console.log('我在循环之外打印:' + index);

  console.log('===================== 使用let 定义的');

  for (let i = 0; i < 2; i++) {
    console.log('我在执行' + i + '次');
    setTimeout(function() {
      console.log('我在setTimeout之中:' + i);
    }, 100);
    console.log('我在执行异步代码之后的打印');
  }

Promise 解决

  // 
  /**
   * 特点，一旦使用promise对象,它就代表一个异步操作，它有三种状态
   * pending（进行中）、fulfilled（已成功）和rejected（已失败）。
   *
   * 因为Promise一旦 新建它就会立即执行，无法中途取消，所以当它执行时，
   * 它的状态只有两种情况:
   * 要么成功，要么失败
   * 从pending（进行中）变为fulfilled（成功）  和  从pending（进行中）变为rejected（失败）
   */

  //  ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

  // 构造函数例子
  function People(name, age) {
    this.name = name;
    this.age = age;
    this.say = function() {
      console.log(this.name + ' ' + this.age);
    };
  }
  let people = new People('码农琼', 54);
  people.say();    // => 码农琼 54
};

创建Promise 的实例


/**
 * 构造函数，我们都知道使用的时候，需要通过new 操作符 创建它的实例，才能使用,
 */

//  创建Promise 的实例
/**
 * resolve  @function 将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）
 * reject   @function 将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）
 */
 let promise = new Promise((resolve,reject)=>{
  //  如果满足条件
  if(/** 条件 */ 10 > 0){
    resolve(value);
  }else{
    reject(error)
  }
 })

//  如果 成功 调用then()方法
promise.then(res=>{

})
//  如果 失败 调用catch()方法
promise.catch(err=>{

})

Promise 一旦创建，就会立即执行，会在所有的同步代码之前执行


// 同步执行完之后，会立即执行 promise 中的异步，及then()方法或者catch()方法

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

axios 实例封装

// axios 封装（举例参考）
function Http(url, params = {}) {
  this.url = url;
  this.params = params;
  // get 请求
  get(){
    return new Promise((resolve, reject) => {
      axios
        .get(url, {params:this.params})
        .then(response => {
          resolve(response);
        })
        .catch(err => {
          reject(err);
        });
    });
  };
  // post 请求
  post(){
    return new Promise((resolve, reject) => {
      axios
      .post(url, this.params)
      .then(response => {
        resolve(response);
      })
      .catch(err => {
        reject(err);
      });
    });
  };
}
const http = new Http(url,params);

export default http;

 /**
   * Promise 下的方法
   * Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
   * Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
   */

Async … await

  /**
   * 在最新的ES7（ES2017）中提出的前端异步特性：async、await。
   * 什么是async、await？不说了啊 ，自己去看文档吧,
   * 不管怎么说，async可以修饰一切函数，同时被async、await修饰后，返回的就是一个promise
   */

  // 举个Promise例子

  function func1(time) {
    // 返回一个Promise对象
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        //异步的状态
        if (true) {
          resolve({ status: 1, msg: 'ok', data: [1, 2, 3] });
        } else {
          reject({ status: 0, msg: 'error' });
        }
      }, time);
    });
  }

  var fn1 = func1(1000);
  fn1.then(
    json => {
      console.log(json);
    },
    error => {
      console.log(error);
    }
  );

async — await 改写

  // async  --- await 改写 


  async function func3(time){
    // 主动返回一个Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(true){//异步的状态
                resolve({status:1,msg:'ok',data:[1,2,3]})
            }else{
                reject({status:0,msg:'error'})
            }            
        },time);
    })
}

// await 可以等待一个Promise对象的resolve，并拿到结果。await只能用在async函数里面 
async function func4(){
    console.log("先执行");
    let res = await func3(1000)
    console.log(res,'执行完第一个异步');
    let res2 = await func3(500);
    console.log(res2,'执行完第二个异步');
    console.log("后执行")
};
func4();

不主动使用promise修饰返回

在这里插入图片描述


// 不主动使用promise修饰返回
async function funtest(){
  // 不主动返回一个promise的修饰
  return 50;
}

let s = funtest().then(res=>{
  // 获取return 的值
  console.log(res)  // =>50
})
// 可以看到返回的还是Proomise
console.log(s)

使用类 … async …await 修饰封装axios

// 创建 axios 实例
var instance = axios.create({
  baseURL: 'http://yapi.demo.qunar.com/mock/1152', // 公共接口url（如果有多个的公共接口的话，需要处理）
  timeout: 3000, // 请求超时
});

class Http{
  static async get(){
    return await instance.get(url, {params}) 
  }
  static async post(){
    return await instance.post(url, {params}) 
  }
}
export default Http;

es6 中的 Promise 和 es7 中 async..await

猜你喜欢