es6 async與await實戰

在使用js的時候，我們經常會遇到一個問題，就是我們需要等待請求返回再做下一步處理，之前的處理方式是通過ajax的success或者callback之類的方法，不過一層一層真的惡心，而且只是針對單個頁面的業務，如果我們想把增刪改查的業務封裝起來，基本沒可能，或者封裝的很不優雅

下面來說一說通過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即可。

 

如果場景不是react和class用不了async 和await 怎么辦呢？其實我的insert方法下還有調用一個方法apiPost體也有resolve，

export const apiPost = (url, configObj) => {
    if (typeof (configObj) === 'undefined') {
        configObj = []
    }
    return new Promise(function (resolve, reject) {
        const reqUrl = base.host + '/' + url + '?token=' + localStorage.getItem('token');
        axios.post(reqUrl, qs.stringify({...configObj})).then(
            response => {
                let resulData = response.data
                resolve(resulData)
            }
        );
    })
}

　　

在insert可以使用.then(function (res) { 來接收resolve過來的值，不過一對比就會發現多了很多(),{}了，不過是底層一點方法，只寫一兩次，所有就無所謂啦，最重要還是保持視圖應用層的簡潔

不吹水了，新年快樂