約束コードコメント（あなたのコードを表示）

非同期機能を理解します

 同步函数：
 const sum1 =(a,b)=>{
   return a+b
 }
 console.log('AAA');
 console.log(sum(5,6));
 conosle.log('BBB')

 异步函数：封装一个函数，这个函数2秒后返回a+b的和
 const sum2 =(a,b,callback)=>{
   setTimeout(()=>{
      callback(a+b)
   },2000)
 }

 console.log('AAA')
 sum2(2,3,(result)=>{
    console.log(result)
 })
 console.log('BBB')

 错误事例：
 const sumAfter2s = (a, b) => {
   setTimeout(() => {
     return a + b;
   }, 2000);
 }
 这里面的return是定时器的这个函数的返回值，外部函数没有返回值

非同期（Asynchronouse）：CPU、他のプログラムを実行するCPUをブロックしていない、このプログラムが中断され、それが実行され、コールバック関数は、彼を実行します
現在、結論：同期機能、彼らは戻り値を持っている、と非同期関数は値を返します（個人的に理解されていません。彼を得るためには戻り値、戻り値は確かにその役割を持っていないなぜ、役割は便利ですが、非同期機能をお待ちしています他の）実行中のプログラムのため、戻り値もの効果を実行します

コールバックブラックホールの理解

また、コールバック地獄として知られ、コールバック地獄
コールバックコールバックのセット、レベルの多くは、これはコールバックブラックホールが生成されます。

  比如利用刚才的sum2这个函数，计算3，4的和，在把这个值与5相加，这些和在与6相加 
  三次计算两个数之和
  sum2(3,4,(r1)=>{
    console.log(r1)
    sum2(r1,5,(r2)=>{
      console.log(r2)
        sum2(r2,6,(r3)=>{
          console.log(r3)
        })
    })
  })

  这样的代码难以阅读，和维护，叫做回调黑洞

コールバック地獄を解決するために、約束の導入後

約束 - 同期、非同期書き込みを書く方法
ウェッジの欠如について電化製品の寿命を認識
- 生活家電が非同期作業している、彼らは人々がブロックされないとき、他の人が行うことができます仕事します
- 通知のこれらの作業の終わりに家電製品、さまざまなことをやって、異なる形式
- 春である場合、作業の終了時に洗濯機は、すぐに電子レンジ仕事のドロップした後、遊びます
- 通知哲学の異なる形式は次のとおりです。契約の欠如
- 約束は、この契約が来る統一することである：契約に生まれた約束

約束の基本的な使用

 原始：
 const sum2 =(a,b,callback)=>{
   setTimeout(()=>{
      callback(a+b)
   },2000)
 }
 使用Promise：
 const sum2=(a,b)=>{
   return new Promise((callback)=>{
     setTimeout(()=>{
       callback(a+b)
     },2000)
   })
 }
 这里重写了num2方法，不同的是，
 这个函数返回Promise类的实例，在new Promise()的时候，要求传入真正的回调函数。
 new Promise(()=>{})里面做异步语句，异步结束后，调用callback()函数，将a+b传回来
 也就是说定义确实变的麻烦了，但是，调用它的时候，也换来了快感，此时的异步函数是有返回值的

 async function main(){
   console.log('AAAA');
   const r1 = await sum2(3, 4);
   const r2 = await sum2(r1, 5);
   const r3 = await sum2(r2, 6);
   console.log(r1);
   console.log(r2);
   console.log(r3);
   console.log('BBBB');
 }
 main();

 es6规定，async是标记异步函数的，await后面可以等一个Promise的实例
 有await语句的函数前面必须加async标记，并且箭头函数不行

 Promise实例天生就有三种状态:pending(进行中),fulfilled(结束)，rejected（失败）.
 一上来就处于pending状态，Promise只有它自己内部的语句，能够把它切换成filfilled的状态。

 -什么时候切换呢？
 就是new Promise()的时候传入的那个函数的形参被调用的时候，Promise状态会变为fulfilled。
 同时resolve()函数中的参数，将成为这个函数的返回值

約束実用化

 顺序读取文件的例子
 原始：
 const fs = require('fs')

 fs.readFile('./a.txt',(err,nr1)=>{
   console.log(nr1.toString());
   fs.readFile('./b.txt',(err,nr1)=>{
     console.log(nr2.toString());
     fs.readFile('./c.txt',(err,nr1)=>{
       console.log(nr3.toString());
     })
   })
 })

 使用Promise干掉回调地狱，但是使用的时候都要封装
 const doFile=(filename)=>{
   return new Promise((resolve)=>{
     fs.readFile(filename,(err,nr)=>{
       resolve(nr.toString())
     })
   })
 }
 调用：
 async function main(){
   const nr1 = await doFile('./a.txt')
   console.log(nr1);
   const nr2 = await doFile('./b.txt')
   console.log(nr2);
   const nr3 = await doFile('./c.txt')
   console.log(nr3)
 }
 main();

 Ajax顺序读取接口1，2，3
 原始地狱写法：
 $.get('jiekou1.java',(data1)=>{
   alert(data1);
   $.get('jiekou2.java',(data2)=>{
     alert(data2);
     $.get('jiekou3.java',(data3)=>{
       alert(data3);
     })
   })
 })

 使用Promise解决，先封装一下
 const qingqiu = (url)=>{
   return new Promise((resolve)=>{
     $.get(url,data=>{
       resolve(data);
     })
   })
 }
 封装挺恶心的，但是换回的是调用的快感
 async function main(){
   const nr1 = await qingqiu('jiekou1.java')
   alert(nr1);
   const nr2 = await qingqiu('jiekou2.java')
   alert(nr2);
   const nr3 = await qingqiu('jiekou3.java')
   alert(nr3) 
 }

 用Axios解决封装的麻烦，Axios这个包封装了Promise版的Ajax，把Aajx封装到了Promise里面了
 <script>引入Axios包</script>
 async function main(){
         const nr1 = await axios.get('jiekou1.php').then(data => data.data);
         const nr2 = await axios.get('jiekou1.php').then(data => data.data);
         const nr3 = await axios.get('jiekou1.php').then(data => data.data);

         alert(nr1);
     }

     main();

 再vue中axios
 {
   data(){
     return {

     }
   },
   methods:{
     async loadData(){
       const jg = await axios.get('').then(data=>data.data);
       this.jg = jg
     async changePage(){
       const jg =await axios.get('').then(data=>data.data);
     }
     async changePageSize(){
       const jg =await axios.get('').then(data=>data.data);
     }
     }
   }
 }

約束の契約を理解します

 将大家都统一了起来
 const xiyifu = (脏衣服，洗衣粉) => {
   return new Promise((resolve) => {
     进水、
     进洗衣粉、
     洗20分钟、
     排水、
     再进水、
     漂水、
     放水、
     resolve(干净衣服);
   });
 }
 const menfan = (冷饭) => {
   return new Promise((resolve) => {
     加蒸汽、
     再加蒸汽、
     再加蒸汽、
     resolve(热饭);
   });
 }

 async function main(){
   const a = await xiyifu('内裤');
   const a = await menfan('米粒');
 }

プロミス利便間違っチューン

 try...catch...捕获的“可能发生”的错误，不会影响程序正常执行
 console.log(1);
 console.log(2);
 console.log(3);
 try{
   console.log('★');
   asdfasdflkajsdlfjk
 }catch(e){

 }
 console.log(4);
 console.log(5);
 // 打印  1 2 3 ★ 4 5

 异步函数不能被try...catch...

 const sumAfter2s = (a, b) => {
   return new Promise((resolve, reject) =>{
     setTimeout(() => {
       if(a + b > 10){
         resolve(a + b);
       }else {
         reject('两个数字太小')
       }
     }, 2000);
   });
 };

 sumAfter2s(3, 4).then(data => {
   console.log(data);
 }).catch(e => {
   console.log(e);
 })

基準面に関する質問

 只写一行语句，实现效果：
 async function foo(){
 // 等到2秒
 await _________________________________________________
 alert('你好');
 }
 foo();

 答案：
 <script type="text/javascript">
     async function foo(){
         // 等到2秒
         const a = await new Promise((resolve) => {
             setTimeout(() => {
                 resolve(34)
             }, 2000)
         });
         alert(a);
     }

     foo();
 </script>

約束コードコメント（あなたのコードを表示）

非同期機能を理解します

コールバックブラックホールの理解

約束 - 同期、非同期書き込みを書く方法

約束の基本的な使用

約束実用化

約束の契約を理解します

プロミス利便間違っチューン

基準面に関する質問

おすすめ