js关于异步请求

关于ajax请求

promise用法

promise原理

promise.all原理

promise.race

iterator

一 使用定时器模拟异步请求

// 使用定时函数模拟异步请求：
// 方法一：使用回调函数
function doSomething(callback){
  setTimeout(function(){
    console.log('执行结束');
    let result = 4;
    callback(result);
  },100);
}
 
function callback(result){
  console.log('接收到结果为：'+result);
}
 
doSomething(callback);
doSomething((result)=>{console.log('接收到结果为：'+result)});

二 使用promise异步请求

function doSomething(){
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log('执行结束');
      let result = 6;
      resolve(result);
    },100);
  });
 
}
 
doSomething().then(result=>{
  console.log('接收到结果为：'+result);
});

使用generator函数

// 方法三：generator函数
function doSomething(){
  setTimeout(function(){
    let result = 6;
    it.next(result);
  },100);
}
 
function *gener(){
  var result = yield doSomething();
  console.log(result);
}
 
let it = gener();

附录

关于promise静态方法的实现

 // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }