async、await在項目中的運用實踐

async的用法

async就是異步的意思，它作為一個關鍵字放到函數前面，用於表示函數是一個異步函數

異步函數也就意味着該函數的執行不會阻塞后面代碼的執行，而async 函數返回的是一個promise 對象。

    async function func() {
      return "async"
    };
    func();
    console.log('執行'); //控制台輸出 執行

可以看出async異步並不阻塞后面代買的執行

    async function func() {
      return "async"
    };
    console.log(func())
    console.log('執行'); //控制台輸出 執行

可以看出async 函數返回的是一個promise 對象，那么我們可以用then繼續下一步

    async function func() {
      return "async"
    };
    func().then( res => {
      console.log(res)
    })
    console.log('執行'); //控制台輸出 執行

可以更近一步的看出async函數並沒有阻塞后面代碼的執行

 

await的用法

await是等待的意思，他后面可以跟任何表達式，不過我們更多的是放一個返回promise 對象的表達式。

注意await 關鍵字只能放到async 函數里面

我們寫一個函數返回一個promise對象，1秒后返回“ promise對象 ”字符串，在寫一個async函數放置await，最后調用控制台將輸出如下

    function returnPromise() {
      return new Promise((resolve,reject) => {
        setTimeout(()=>{
          resolve('promise對象')
        },1000)
      })
    }
  
    async function awaitFunc() {
      let data = await returnPromise();
      console.log(data)
    }

    awaitFunc();

 這樣也就再也不需要回調了，可以很好的解決回調地域的問題

回頭來看代碼的執行過程，調用 awaitFunc 函數，它里面遇到了await，代碼就暫停到這里，不再向下執行了，等后面的promise對象執行完畢，然后拿到promise resolve 的值並進行返回，返回值拿到之后，它繼續向下執行。具體到代碼, 遇到await 之后，代碼就暫停執行了， 等待returnPromise執行完畢，1秒后，promise resolve了， 並返回了值， 這時await 才拿到返回值， 然后賦值給data， 暫停結束，代碼才開始繼續執行下一行console.log語句，最后輸出'promise對象'字符串。

 

這就是async與await，項目實踐中我們也經常用到，比如：

    //下鑽渲染
    async down(path, name){
      let code=this.backname(name);

      let data = await axios.get(`api-website/sys/st-sch-school/schoolByGIS?province=${code}`);

      data=data.data.result;

      let json = await axios.get(path);

      this.$echarts.registerMap(name, json.data);
      this.myChart.setOption(
        DownheatOption(data, name),
        false,
      );
    },

 

  async mounted() {
    let map = await axios.get(`http://localhost:8080/static/json/china.json`);
    this.chinajson = map.data;
    
    let one= await axios.get('api-website/sys/st-sch-school/schoolByGIS?batch=3');
    this.heatarr.all=one.data.result;//全部高校數據
  },

 

    async goodsDetails() {
      let self = this;
      let result = await api.request('goodsDetails', { code: self.code })
      if (result.status == 0) {
        let data = result.data;
        self.name = data.name;
        self.images = JSON.parse(data.images);
      } else {
        self.$message.error('獲取商品詳情失敗！')
      }
    },

同

    goodsDetails() {
      let self = this;
      api.request('goodsDetails', { code: self.code }, res => {
        if (res.status == 0) {
          let data = res.data;
          console.log('data', data)
          self.name = data.name;
          self.images = JSON.parse(data.images);
        } else {
          self.$message.error('獲取商品詳情失敗！')
        }
      })
    },

 通過以上示例相信可以更好的了解async、await實踐運用