异步、期约

异步、期约

异步返回值

function test1(a, b, callback) {
  var a = a + b;
  // 异步操作
  setTimeout(function () {
    // 异步执行完成获得数据作为参数返回给回调函数。
    callback(a);
  }, 1000);
}
// 传入数据并利用回调函数获得异步结果。
test1(1, 2, (res) => {
  console.log(res); // 3
});

失败处理

function double(value, success, failure) {
  setTimeout(() => {
    try {
      if (
        !(Object.prototype.toString.call(value) === "[object Object]") ||
        !("name" in value)
      ) {
        throw "传入的数据有误！";
      }
      success(value["name"] + "加油！");
    } catch (e) {
      failure(e + "继续努力！");
    }
  });
}
double(
  { name: "小卡车" },
  (res) => {
    console.log(`success: ${res}`);
  },
  (error) => {
    console.log(`error: ${error}`);
  }
);
// 输出 success: 小卡车加油！
double(
  {},
  (res) => {
    console.log(`success: ${res}`);
  },
  (error) => {
    console.log(`error: ${error}`);
  }
);
// 输出： error: 传入的数据有误！继续努力！

Promise

• Promise.resolve

let p = Promise.resolve({ name: "小卡车", age: 20 });
p.then((res) => {
  console.log(res); // { name: '小卡车', age: 20 }
});
// Promise.reject
let p1 = Promise.reject("Error");
p1.then(
  (res) => {
    console.log("success");
  },
  (err) => {
    console.log(err);
  }
)
  .then(() => {
    return {
      name: "小卡车",
    };
  })
  .then((res) => {
    console.log(res);
  })
  .then(() => {
    return Promise.resolve({ age: 20 });
  })
  .then((res) => {
    console.log(res);
  })
  .finally(() => {
    console.log("finally");
  });
// Error
// { name: '小卡车' }
// { age: 20 }
// finally

let p2 = Promise.resolve("小卡车");
p2.then((res) => {
  console.log(res);
}).finally(() => {
  console.log("Finally");
});
// 小卡车
// Finally

let p3 = Promise.resolve({ name: "小卡车" });
p3.then((res) => {
  console.log(res);
})
  .finally(() => {
    return Promise.reject("Error reject");
  })
  .catch((err) => {
    console.log(err);
  });
/*   
{ name: '小卡车' }
Error reject */

let p4 = new Promise(() => {
  throw "ERROR 错误";
});
p4.catch((err) => {
  console.log(err);
});

异常

let p5 = new Promise((resolve, reject) => {
  try {
    throw Error("错误");
  } catch (e) {
    reject(e);
  }
});
p5.catch((onrejected) => {
  console.log("138", onrejected);
}).finally(() => {
  console.log("finally");
});

• 执行顺序

console.log("1");
let p = new Promise((resolve, reject) => {
  console.log("2");
  setTimeout(() => {
    console.log("3");
    resolve("小卡车");
    console.log("4");
  });
  console.log("5");
});
console.log("6");
p.then((res) => {
  console.log("7");
  console.log(res);
});
console.log("8");
setTimeout(() => {
  console.log("9");
});
/* 
1
2
5
6
8
3
4
7
小卡车
9 
*/

• 期约连锁

let p = new Promise((resolve, reject) => {
  console.log("first");
  resolve();
});
p.then(() => {
  console.log("second");
})
  .then(() => {
    console.log("third");
  })
  .then(() => {
    console.log("fourth");
  });
/*
first
second
third
fourth
*/

let p1 = new Promise((resolve, reject) => {
  console.log("p1");
  setTimeout(resolve, 0, "111");
});
p1.then(
  (res) =>
    new Promise((resolve, reject) => {
      console.log("p2", res);
      setTimeout(resolve, 0, "222");
    })
).then((res) => {
  console.log("p3", res);
});
/*
p1
p2 111
p3 222
*/

• 生成期约的工厂函数

function delayResolve(str) {
  return new Promise((resolve, reject) => {
    console.log(str);
    resolve();
  });
}
delayResolve("p1")
  .then(() => delayResolve("p2"))
  .then(() => delayResolve("p3"));
/*
p1
p2
p3
*/

• Promise.all()

let p2 = Promise.all([Promise.resolve(1), Promise.resolve(2)]);
setTimeout(console.log, 0, p2); // Promise { [ 1, 2 ] }
p2.then((res) => {
  console.log("p2:", res); // p2: [ 1, 2 ]
});

// 会转换为 Promise.resolve()
let p3 = Promise.all([1, 2]);
setTimeout(console.log, 0, p3); // Promise { [ 1, 2 ] }
p3.then((res) => {
  console.log("p3:", res); // p3: [ 1, 2 ]
});

// 等价于 Promise.resolve()
let p4 = Promise.all([]);
setTimeout(console.log, 0, p4); // Promise { [] }
p4.then((res) => {
  console.log("p4:", res); // p4: []
});

// 合成的期约要全部解决后才解决
let p5 = Promise.all([
  Promise.resolve("p5 - 1"),
  new Promise((resolve) => {
    resolve("p5 - 2");
  }),
]);
setTimeout(console.log, 0, p5); // Promise { [ 'p5 - 1', 'p5 - 2' ] }
p5.then((res) => {
  console.log("p5:", res); // p5: [ 'p5 - 1', 'p5 - 2' ]
});

function test1(x) {
  return x + 2;
}
let pp = new Promise((resolve, reject) => {
  resolve(1);
});
pp.then(test1).then(res => {
  console.log(res); // 3
});
function test2(x) {
  return x + 3;
}
let z = [test1, test2].reduce((promise, fn) => promise.then(fn), Promise.resolve(2));
setTimeout(console.log, 0, z); // Promise { 7 }