03-es6语法 Promise 和 es8语法 async await 的了解和基本使用

时间:2022-12-31 16:09:20
 //Promise 

 // 1.说明 : Promise 是 es6 中提出的新语法
// 2.作用 : 用 '用户编写同步代码' 的方式 '处理异步' 的一种解决方案
// 3.以前 : 处理异步 , 都是通过回调处理的 ,
// ==> 比如 : setTimeout(() => {}, 0); $.ajax({
url: '',
type: '',
data: {},
dataType: json,
success: res => {
$.ajax({
url: '',
type: '',
data: {},
dataType: json,
success: res => {
$.ajax({
url: '',
type: '',
data: {},
dataType: json,
success: res => {}
});
}
});
}
});   // 现在 : 可以使用 Promise 解决回调地狱的问题
 // ==> 比如 : promise.then().then().then() ... // 4.Promise 的基本使用
// ① Promise 是一个构造函数
// ② () 中是一个回调函数 => 里面有两个参数 :
// 参数 1: resolve: 一个回调 => 成功操作会调用
// 参数 2: resolve: 一个回调 => 成功操作会调用
// ③ promise 里面一般会放一个异步操作 :
// 比如 : const p = new Promise((resolve, reject) => {
setTimeout(() => {
// 成功操作时执行 : resolve()
// 失败操作时执行 : reject()
}, 0);
}); // 5.示列 (用 promise 封装一个异步读取文件 node.js) const fs = require('fs');
//封装
const p = new Promise((resolve, reject) => {
fs.readFile('路径', 'utf//8', (err, data) => {
// 处理错误
if (err) {
return reject(err);
}
resolve(data);
});
}); // 使用
p.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});      // async 和 await   const fs = require('fs');
  const axios = require('axios');   // 1.说明 : async 和 await 是 es8 中提出的新语法
  // 2.作用 : 用 `编写同步代码` 的方式 处理异步 , 处理的更彻底
  // 3. async 和 await 的基本使用 :
    // ① async : 修饰一个函数(内部有异步操作的函数)
    // ==> 格式 : async function fn() { }
    // ② await : 修饰一个异步操作(promise 实例)
    // ==> 格式 : await 异步操作(promise 实例)     async function fn() {
      //正确执行try里面的代码
      try {
      //axios.get('http://localhost:3000/first') ==> promise 实例
      let data = await axios.get('http://localhost:3000/first');
      console.log('成功操作', data);
      } catch (err) {
      //错误执行catch 里面的代码
      console.log('失败操作');
      }
    }     fn();
    // 4. 注意点 : ① async 和 await 是成对出现的
           // ② async 和 await 处理异常(报错) 需要配黑 try {} catch() {}
           // ③ async 一定要加载 await 外部最近的一个函数上面