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

  1 //Promise 
  2 
  3 // 1.说明 : Promise 是 es6 中提出的新语法
  4 // 2.作用 : 用 '用户编写同步代码' 的方式 '处理异步' 的一种解决方案
  5 // 3.以前 : 处理异步 , 都是通过回调处理的 ,
  6   // ==> 比如 :
  7 
  8     setTimeout(() => {}, 0);
  9 
 10     $.ajax({
 11       url: '',
 12       type: '',
 13       data: {},
 14       dataType: json,
 15       success: res => {
 16         $.ajax({
 17           url: '',
 18           type: '',
 19           data: {},
 20           dataType: json,
 21           success: res => {
 22             $.ajax({
 23               url: '',
 24               type: '',
 25               data: {},
 26               dataType: json,
 27               success: res => {}
 28             });
 29           }
 30         });
 31       }
 32     });
 33 
 34 
 35 　　// 现在 : 可以使用 Promise 解决回调地狱的问题
 36   　// ==> 比如 :
 37  
 38     promise.then().then().then() ...
 39   
 40 // 4.Promise 的基本使用
 41   // ① Promise 是一个构造函数
 42   // ② () 中是一个回调函数 => 里面有两个参数 :
 43     // 参数 1: resolve: 一个回调 => 成功操作会调用
 44     // 参数 2: resolve: 一个回调 => 成功操作会调用
 45   // ③ promise 里面一般会放一个异步操作 :
 46     // 比如 :
 47 
 48  
 49   const p = new Promise((resolve, reject) => {
 50     setTimeout(() => {
 51       // 成功操作时执行 : resolve()
 52       // 失败操作时执行 : reject()
 53     }, 0);
 54   });
 55 
 56 // 5.示列 (用 promise 封装一个异步读取文件 node.js)
 57 
 58   const fs = require('fs');
 59   //封装
 60   const p = new Promise((resolve, reject) => {
 61     fs.readFile('路径', 'utf//8', (err, data) => {
 62       // 处理错误
 63       if (err) {
 64         return reject(err);
 65       }
 66       resolve(data);
 67     });
 68   });
 69 
 70   // 使用
 71   p.then(res => {
 72     console.log(res);
 73   }).catch(err => {
 74     console.log(err);
 75   });
 76 
 77 
 78 
 79 　　
 80  
 81 　　// async 和 await
 82 
 83 　　const fs = require('fs');
 84 　　const axios = require('axios');
 85 
 86 　　// 1.说明 : async 和 await 是 es8 中提出的新语法
 87 　　// 2.作用 : 用 `编写同步代码` 的方式 处理异步 , 处理的更彻底
 88 　　// 3. async 和 await 的基本使用 :
 89 　　　　// ① async : 修饰一个函数(内部有异步操作的函数)
 90 　　　　// ==> 格式 : async function fn() { }
 91 　　　　// ② await : 修饰一个异步操作(promise 实例)
 92 　　　　// ==> 格式 : await 异步操作(promise 实例)
 93 
 94 　　　　async function fn() {
 95 　　　　　　//正确执行try里面的代码
 96 　　　　　　try {
 97 　　　　　　//axios.get('http://localhost:3000/first') ==> promise 实例
 98 　　　　　　let data = await axios.get('http://localhost:3000/first');
 99 　　　　　　console.log('成功操作', data);
100 　　　　　　} catch (err) {
101 　　　　　　//错误执行catch 里面的代码
102 　　　　　　console.log('失败操作');
103 　　　　　　}
104 　　　　}
105 
106 　　　　fn();
107 　　　　// 4. 注意点 : ① async 和 await 是成对出现的
108 　　　　　　　　　　 // ② async 和 await 处理异常(报错) 需要配黑 try {} catch() {}
109 　　　　　　　　　　 // ③ async 一定要加载 await 外部最近的一个函数上面