ES6 async 與 await 實戰

下面來說一說通過async和await方式來輔助請求和封裝

首先我們定義一個類，定義一個async方法，才可以使用await

class JForm extends React.Component {
 
  handleSubmit = () => {
    ...
    this.handleInsert(obj)
    ... 
  }

  async handleInsert(obj) {
    let url = '...'
    let res = await insert(url, obj)
    if(res){
      this.hideModal();
      this.props.refresh();
    }
  };
}

上面是一個react的一段代碼，當觸發handleSubmit 表單提交方法，會調用handleInsert方法，此時會等await insert 執行完返回結果再執行if(res)的判斷

我們再來看看重要的insert方法應該怎么寫呢

export function insert(url, obj) {
  return new Promise(function (resolve, reject) {
    const hide = message.loading('正在新增...', 0);
    let res = apiPost(url, obj).then(function (res) {
      const {data, ret, msg} = res;
      hide();
      if(ret==200) {
        Success(`添加1條數據`);
      } else {
        Error(res.msg);
      }
      resolve(ret==200?true:false)
    })
  })
}

看起來貌似有點復雜？其實核心的代碼只有下面的部分

export function insert(url, obj) {
  return new Promise(function (resolve, reject) {
    resolve(ret==200?true:false)
  })
}

對的，只有 return new Promise 和 resolve() ，resolve里面的data就是let res要接收的值了，我們可以在請求后將結果傳入resolve即可。