vue使用promise、async、await的一点理解

理解：

Promise返回一个对象，这个对象的构造函数里面可以传入函数，函数的第一个参数是一个回调函数，即成功的回调函数。函数的第二个参数也是回调函数，失败的回调函数。这个对象可以.then().catch(),所以可以写成new Promise().then().catch()，也可以写成var a = new Promise(); a.then().catch();

Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的，

Promise中的函数的第一个参数是回调函数，resolve用来触发then里面的代码，第二个参数是回调函数，reject用来触发catch中的代码，throw new Error();也可以触发catch，

await可以是Promise同步，即不会立即执行Proimse外面(或者说下面)的代码，而await只能用在async标记的函数中，这样async函数本身就是异步的，而async函数里面的代码是同步的

async本身是异步的，可以这样理解，async函数执行到await的时候就立即返回，开始执行async下面的代码，与await等待执行的代码同时执行

渐进理解：

    test:function(){
      new Promise((resolve, reject)=>{
        console.log('promise')
        setTimeout(()=>{
          console.log('time out')
          console.log(reject)
          reject(3455435)
        }, 1000)
      }).then(r=>{
        console.log('promise then')
        console.log(r)
      }).catch(e=>{
        console.log('promise catch')
        console.log(e)
      })
	  console.log('new Promise done')
    }, 

    //resolve和reject是两个回调函数，调用resolve会触发then，reject会触发catch

 

    

    test:function(){
      new Promise((resolve, reject)=>{
        console.log('promise')
        setTimeout(()=>{
          console.log('time out')
          console.log(resolve)
          resolve(3455435)
        }, 1000)
      }).then(r=>{
        console.log('promise then')
        throw new Error('我勒个去！');//触发catch
        console.log(r)
      }).catch(e=>{
        console.log('promise catch')
        console.log(e)
      })
    }, 

    //throw new Error('哈哈哈哈')也会触发catch

 

    

    test:function(){
      //做饭
      function cook(){
          console.log('开始做饭。');
          var p = new Promise(function(resolve, reject){        //做一些异步操作
              setTimeout(function(){
                  console.log('做饭完毕！');
                  resolve('鸡蛋炒饭');
              }, 1000);
          });
          return p;
      }
       
      //吃饭
      function eat(data){
          console.log('开始吃饭：' + data);
          var p = new Promise(function(resolve, reject){        //做一些异步操作
              setTimeout(function(){
                  console.log('吃饭完毕!');
                  resolve('一块碗和一双筷子');
              }, 2000);
          });
          return p;
      }
       
      function wash(data){
          console.log('开始洗碗：' + data);
          var p = new Promise(function(resolve, reject){        //做一些异步操作
              setTimeout(function(){
                  console.log('洗碗完毕!');
                  resolve('干净的碗筷');
              }, 2000);
          });
          return p;
      }

      cook()
      .then(function(data){
          return eat(data);
      })
      .then(function(data){
          return wash(data);
      })
      .then(function(data){
          console.log(data);
      });
      
      console.log('cook done????')
    }, 

    //new Promise返回到是一个对象，可以在对象后面加then，then要在resolve后才会触发，所以会顺序执行,但是它本身是异步的，所以没有.then的代码会是会异步执行

 

    
    

    test:function(){
      //做饭
      function cook(){
          console.log('开始做饭。');
          var p = new Promise(function(resolve, reject){        //做一些异步操作
              setTimeout(function(){
                  console.log('做饭失败！');
                  reject('烧焦的米饭');
              }, 1000);
          });
          return p;
      }
       
      //吃饭
      function eat(data){
          console.log('开始吃饭：' + data);
          var p = new Promise(function(resolve, reject){        //做一些异步操作
              setTimeout(function(){
                  console.log('吃饭完毕!');
                  resolve('一块碗和一双筷子');
              }, 2000);
          });
          return p;
      }
       
      cook()
      .then(eat, function(data){
        console.log(data + '没法吃!');
      })

      console.log('cooke done ???')
    }, 

    //reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”情况的回调（then 方法的第二参数）。

 

 

    test:function(){
      async function testAsync(){
        return "hello async"
      }

      var a = testAsync();
      console.log(a)
      a.then((b)=>{
        console.log("a.then")
        console.log(b)
      })
    }, 

    //async返回的是一个Promise对象，then的第一个参数就是async函数的返回值

如果var a = await testAsync();返回值就是"hello async",因为await等待的就是Promise的返回，而async返回到就是一个Promise，然后这个Promise中直接返回了"hello async"

 

 

    test:function(){
      function takeLongTime() {
          return new Promise(resolve => {
              setTimeout(() => resolve("long_time_value"), 1000);
          });
      }

      async function test() {
          console.log('before takeLongTime')
          const v = await takeLongTime();
          console.log(v);
      }

      test();
      console.log('after test')

    }, 

    //await可以阻塞Promise对象，await=async wait，await只能出现在async函数内部

 

   

    async request(){

      var url = this.url

      var a = new Promise(resolve=>{
        this.axios.post(url, 
          postData
        ).then(res=>{
          console.log(res.data)
          resolve('请求成功')
        }).catch(error=>{
          console.log(error)
          resolve('请求失败')
        })
        console.log('new Promise done')
      })

      console.log('before await a')
      var b = await a
      console.log('await a done')
      console.log(b)
    }, 

    //使网络请求同步,但是仔细一看，其实axios.post也有then catch，所以可以有更简单的调用

    async request(){
      var url = this.url

      var a = this.axios.post(url, 
          postData, 
          {
            // 单独配置
            withCredentials: true
          }
        ).then(res=>{
          console.log(res.data)
          return '请求成功'
        }).catch(error=>{
          console.log(error)
          return '请求失败'
        })

      console.log('before await a')
      var b = await a
      console.log('await a done')
      console.log(b)
    }, 

或者写成request:async function(){}

    

  mounted:function(){

    console.log('test async')
    this.request()
    console.log('async done')
  }, 

  //async函数使其内部同步，同级调用还是异步，async函数下面的接口会在async函数中的await执行完之前调用