如何利⽤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 ((de) === 0 || de) === 200) && response.data) {
if (response.data) {
if (callback && typeof callback === 'function') {
callback(response.data); // 返回结果
}
yield put({
type: 'AllRes',
payload: response,
});
}
}
await和async使用方法}
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顺序从上往下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。