基礎函式

基礎函式的作用是將 wx.request 封裝成 Promise 物件，通過 export 對外輸出。

/**
*  請求業務介面基本方法
*
* @param {Object} [data={}] - 對應wx.request裡data引數
* @param {Object} [opts={}] - 對應wx.request裡其他引數
* @returns {Promise}
*/
export function fetch(data = {}, opts = {}) {
    // 通用設定
    const options = {
        url: 'https://api.youapp.com/'
        header: {
            'cookie': `your_key=your_value;`
        }
    }

    return new Promise((resolve, reject) => {
        wx.request({
            ...Object.assign(options, opts),
            data,
            success: function(res) {
                resolve(res);
            },
            fail: function(err) {
                reject(err);
            }
        })
    })
    .then(checkStatus)
    .catch(() => {
        // do something
    })
}
 

全域性異常處理

業務介面往往會設定一個標誌位，告訴請求方請求是否異常。因為標誌位是事先約定好的，所以可以在全域性處理異常。示例函式中code為標誌位，當code為0時，返回資料；當code不為0時，屬於異常情況。這裡，處理異常的方法是跳轉一個錯誤頁面，可根據專案要求自行設定處理方法。

/**
*  介面返回值狀態判斷
*
* @param {Object} response - 介面返回值
* @returns {Promise}
*/
function checkStatus(response) {
    let msg = '';
    if (response.statusCode >= 200 && response.statusCode < 300) {
        let { code } = response.data
        switch (code) {
            case 0:
                // 請求成功，返回一個Promise物件
                return Promise.resolve(response.data);
                break;
            case 1:
                // 處理token過期的情況
                wx.removeStorageSync("token");
                msg = '哎喲，登入超時，重新整理試試';
                break;
            default:
                msg = '哎喲，服務異常，重新整理試試';
                break;    
            }
    }
    // 防止重複跳轉
    if (getCurrentPageUrl() != 'pages/error/error'){
        wx.navigateTo({
            url: `/pages/error/error?msg=${msg}`
        });
    }
}

/**
* 獲取當前頁面url
* @returns {String}  當前頁面url
*/
function getCurrentPageUrl(){
    let pages = getCurrentPages()    //獲取載入的頁面
    let currentPage = pages[pages.length-1]    //獲取當前頁面的物件
    return currentPage.route    //當前頁面url
}
 

帶Token的請求函式

有些業務介面需要攜帶使用者資訊。微信小程式通過 token 傳遞使用者資訊，具體流程請見小程式官方文件。

因此，我們還需要封裝一個帶Token的請求函式。實現方法是將token存在storage中，每次請求時判斷token是否存在。若存在，直接發起請求；若不存在，則先獲取token，再發起請求。這裡還能用到上面已經封裝好的基礎函式，來簡化函式。

/**
*  帶token的請求業務介面
*
* @param {Object} [data={}] - 對應wx.request裡data引數，也就是query部分
* @param {Object} [opts={}] - 對應wx.request裡其他引數
* @returns {Promise}
*/
export function fetchWithToken(data = {}, opts = {}) {
    const token = wx.getStorageSync('token');
    if (token) {
        data.token = token;
        return fetch(data, opts)
    } else {
        return getToken().then((token) => {
        data.token = token;
        return fetch(data, opts);
        })
    }
}
 

根據微信的登入流程，需要通過 wx.login 獲取臨時憑證（code），然後用code向後臺兌換token，因此 getToken 函式的邏輯是這樣的：

/**
* 獲取token
* @returns {String} token token值
*/
function getToken() {
    // 返回一個Promise物件
    return new Promise((resolve, reject) => {
        wx.login({
            success: function(res) {
                if (res.code) {
                    let data = {
                        code: res.code
                    };
                    fetch(data).then((res) => {
                        const { token } = res;
                        // 把token放在storage中
                        wx.setStorageSync("token", token);
                        // 輸出token
                        resolve(token);
                    });
                }else{
                    console.log('code error');
                }
            },
            fail: function(err) {
                console.log('登入失敗！' + err.errMsg);
            }
        })
    })
}

將這些函式放在一個檔案中，並將 fetch 函式和 fetchWithToken 函式輸出，就能在頁面中呼叫封裝好的請求函式，簡化開發過程。

原文https://www.kapeter.com/post/63