如何利用async、await保證異步先執行之后運行同步方法

前言：

之前對acync、await的理解不是很深刻，相信有很多同學和我一樣，可能停留在請求時候會用到，例如在請求函數前面加個async，用於標明是個異步函數，獲取請求到的promise。

異步操作有兩種方法，一個是回調，一個是使用promise（async）。那么當假設沒有回調方法時候怎么去處理保證先異步完成再執行方法呢？例如dvajs中的dispatch，修改reduces的時候，假設不寫回調，就不行。寫這篇文章的目的在於教大家如何操作異步方法。

 

1、如何理解async和promise？

async 其實就是promise的語法糖，兩者配合（更高級，更簡單明白的寫法）

2、如何做異步操作？

函數前面必須加一個async，異步操作的方法前加一個await 關鍵字。顧名思義，就是讓你等一下，執行完了再繼續往下走。

3、應用場景

在dvajs中，props.dispatch是一個異步操作，有一個需求是先清空存儲在models里面state的值，再去出發下一個函數方法請求數據。

   // models.js文件

import { getAllRes, getImgs, getImgsByImg, getMoreWord, getPrompt, nodeDetail } from '../services/search';

export default {
  namespace: 'search', // 默認與文件名相同
  state: {
    AllRes: {},
    resArticles: {},
    resDocument: {},
    resImg: {},
    resMap: [],
    imgs: {},//圖片搜索
  },
  effects: {//請求搜索數據的接口
    * fetchAllRes({ payload, callback }, { put, call, select }) {
      const response = yield call(getAllRes, payload);
      // if ((Number(response.code) === 0 || Number(response.code) === 200) && response.data) {
      if (response.data) {
        if (callback && typeof callback === 'function') {
          callback(response.data); // 返回結果
        }
        yield put({
          type: 'AllRes',
          payload: response,
        });
      }
    }
}
  reducers: {
    AllRes(state, action) {
      let data = action.payload.data;return {
        ...state,
        AllRes: data,
        resImg: data ? data.image : [],
        resMap: data  ? data.mapData : [],
        resArticles: data  ? data.art : {},
        resDocument: data  ? data.file : {},
      };
    },/**
     * 清空所有state數據
     * @param state
     */
    clearAll(state) {
      return {
        ...state,
        AllRes: {},
        resArticles: {},
        resDocument: {},
        resImg: {},
        resMap: {},
        imgs: {},//圖片搜索
        moreWord: [],
        prompt: [],
      };
    },
};

//  頁面js文件

  /**
   * 先保證異步dispatch執行清空數據，再進行請求數據
   */
  onSearch = () => {
    (async () => {
      await this.props.dispatch({ type: 'search/clearAll' });  //觸發reduces，用於清空state的數據操作

      await this.props.dispatch({ type: 'search/clearSomething' });  //其他異步操作

　　　　await this.asyncOkToDo();  //當做完以上兩個dispatch異步操作時候，才執行這個函數，這個方法函數可以是異步或者非異步
    })();
  };

asyncOkToDo = ()=>{
　　//函數做一些事情，例如請求dispatch、fetch請求
}

 

這樣就能保證，先執行完異步操作，在接着運行你的函數方法，按照await順序從上往下。