如何利用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顺序从上往下。

如何利用async、await保证异步先执行之后运行同步方法

推荐阅读