微信小程序開發(fā)點擊按鈕常見問題解決

var getUserDataFlag = false;

function getUserData() {

 if (getDataFlag) {

   return;

 }

 getDataFlag = true;

 $.ajax({

   url: '/xxx/getUser',

   success: function () {

     getUserData = false;

     //todo

   },

   error: function () {

     getUserData = false;

   }

 })

}

//當接口很多的時候，我們的代碼就變成這樣

var getUserAssetFlag = true;

function getUserAsset() {

 if (getDataFlag) {

   return;

 }

 getDataFlag = true;

 $.ajax({

   url: '/xxx/getUserAsset',

   success: function () {

     getUserAssetFlag = false;

     //todo

   },

   error: function () {

     getUserAssetFlag = false;

   }

 })

}

import {isObject} from './util'

let Promise = require('../libs/bluebird.min')

let requestList = {} //api請求記錄

// 將當前請求的api記錄起來

export function addRequestKey (key) {

   requestList[key] = true

}

// 將請求完成的api從記錄中移除

export function removeRequestKey (key) {

   delete requestList[key]

}

//當前請求的api是否已有記錄

export function hitRequestKey (key) {

   return requestList[key]

}

// 獲取串行請求的key,方便記錄

export function getLockRequestKey (data) {

   if (!isObject(data)) {

       return data

   }

   let ajaxKey = 'lockRequestKey:'

   try {

       ajaxKey += JSON.stringify(data)

   } catch (e) {

       ajaxKey += data

   }

   return ajaxKey

}

//根據(jù)請求的地址，請求參數(shù)組裝成api請求的key,方便記錄

export function getRequestKey (data) {

   if (!isObject(data)) {

       return data

   }

   let ajaxKey = 'Method: ' + data.method + ',Url: ' + data.url + ',Data: '

   try {

       ajaxKey += JSON.stringify(data.data)

   } catch (e) {

       ajaxKey += data.data

   }

   return ajaxKey

}

//所有與服務(wù)器進行http請求的出口

export function http (data) {

   if (!isObject(data)) {

       throw Error('ajax請求參數(shù)必須是json對象: ' + data)

   }

   data.method = (data.method || 'GET').toUpperCase()

   //下面5行是對所有http請求做防重復請求處理，后面單獨分享原理

   let ajaxKey = getRequestKey(data)

   if (hitRequestKey(ajaxKey)) {

       throw Error('重復提交請求：' + ajaxKey)

   }

   addRequestKey(ajaxKey)

   //bluebird.js包裝成promisepromise api

   return new Promise(function (resolve, reject) {

       //通過wx.request api 向服務(wù)器端發(fā)出http請求

       wx.request({

           url: data.url,

           data: data.data,

           method: data.method,

           header: data.header || {'Content-Type': 'application/json'},

           complete: function (res) {

               // 請求完成，釋放記錄的key，可以發(fā)起下次請求了

               removeRequestKey(ajaxKey)

               let statusCode = res.statusCode

               if (statusCode === 200 || statusCode === 304) {

                   return resolve(res.data)

               }

               return reject(res)

           }

       })

   })

}

//通用get請求方法

export function httpGet (data) {

   return http(data)

}

//通用post請求方法

export function httpPost (data) {

   data.method = 'POST'

   return http(data)

}

// 該方法適用于串行請求的api

export function lockRequest (data, fn) {

   let ajaxKey = getLockRequestKey(data)

   if (hitRequestKey(ajaxKey)) {

       throw Error('重復提交請求：' + ajaxKey)

   }

   addRequestKey(ajaxKey)

   return new Promise(function (resolve, reject) {

       fn(data)

           .then(function (data) {

               removeRequestKey(ajaxKey)

               return resolve(data)

           })

           .catch(function (error) {

               removeRequestKey(ajaxKey)

               return reject(error)

           })

   })

}