uniapp的請求封裝

隨著行動端應用的快速發展，前端框架也越來越多樣化。其中，uniapp作為一款基於Vue.js的跨平台開發框架，在行動應用開發中得到越來越廣泛的應用。

身為前端開發人員，我們在uniapp進行開發時，常常會用到很多API或伺服器介面進行資料互動。在資料請求過程中，我們需要考慮網路通訊、資料格式、資料安全性等問題，同時也要確保程式碼的可讀性和可維護性。針對這些問題，我們可以將API請求進行封裝，以提高程式碼的可讀性和可維護性。

下面就來介紹一下uniapp的請求封裝。

一、網路請求

uniapp中發送網路請求需要用到uni.request()，該函數是一個非同步函數，需要使用Promise進行封裝。以下是一個簡單的封裝範例：

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

在該封裝函數中，我們需要傳入請求方法、請求URL以及請求資料。此外，該函數還定義了請求頭、請求成功和請求失敗的回呼函數。

二、統一錯誤處理

封裝請求的過程中，我們需要考慮請求中的錯誤處理。在錯誤處理的過程中，我們可以透過對錯誤代碼進行統一的處理，來提高程式碼的可維護性。以下是一個常見的錯誤代碼處理範例：

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在該封裝函數中，我們透過判斷錯誤代碼的不同類型，定義了不同的錯誤提示資訊。這樣的處理方法可以讓程式碼更容易維護。

三、請求的設定

對於經常使用的API接口，我們可以對請求進行更為細粒度的封裝。在發送請求的過程中，我們可以定義請求的各種選項和參數，來實現更靈活和有效率的請求。

以下是一個請求設定範例：

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在該封裝函數中，我們定義了基礎URL、請求逾時時間和請求頭。在呼叫函數時，外部傳入的參數將根據需求進行合併，在請求頭中增加了Accept-Language參數，實現了更靈活的請求配置。

四、請求攔截器

在一個複雜的應用程式中，我們可能需要對請求進行攔截處理。例如，對於每個請求，在發送之前需要對請求頭增加token驗證資訊等。

以下是一個請求攔截器範例：

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  uni.addInterceptor('request', (options) => {
    options.header['token'] = uni.getStorageSync('token');
    return options;
  });

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在該封裝函數中，我們使用了uni.addInterceptor()函數，在請求中增加了token驗證資訊。這樣的封裝方法可以實現對每個請求的統一管理處理。

總結

身為一個前端開發人員，程式碼的可讀性和可維護性一直都是個不可或缺的問題。在uniapp中，我們應當靠封裝API請求來實現這個目標，盡可能提高程式碼的重用性和程式碼的可讀性。同時，在封裝請求中，我們根據每個專案的實際需求來最佳化封裝方法，以實現更有效率的請求操作。

以上是uniapp的請求封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！