uniapp request encapsulation

With the rapid development of mobile applications, front-end frameworks are becoming more and more diverse. Among them, uniapp, as a cross-platform development framework based on Vue.js, is increasingly used in mobile application development.

As front-end developers, when we develop uniapp, we often use many APIs or server interfaces for data interaction. During the data request process, we need to consider network communication, data format, data security and other issues, while also ensuring the readability and maintainability of the code. To address these problems, we can encapsulate API requests to improve the readability and maintainability of the code.

Let’s introduce the request encapsulation of uniapp.

1. Network request

To send a network request in uniapp, you need to use uni.request(). This function is an asynchronous function and needs to be encapsulated using Promise. The following is a simple encapsulation example:

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);
      },
    });
  });
}

In this encapsulation function, we need to pass in the request method, request URL and request data. In addition, this function also defines request headers, callback functions for request success and request failure.

2. Unified error handling

In the process of encapsulating the request, we need to consider the error handling in the request. During the error handling process, we can improve the maintainability of the code by uniformly handling error codes. The following is a common error code processing example:

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));
      },
    });
  });
}

In this encapsulated function, we define different error prompt messages by judging different types of error codes. This approach makes the code easier to maintain.

3. Request configuration

For frequently used API interfaces, we can encapsulate requests in a more fine-grained manner. During the process of sending a request, we can define various options and parameters of the request to achieve a more flexible and efficient request.

The following is an example of request configuration:

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));
      },
    });
  });
}

In this encapsulation function, we define the base URL, request timeout and request headers. When calling the function, the external parameters passed in will be merged according to the requirements, and the Accept-Language parameter is added to the request header to achieve a more flexible request configuration.

4. Request interceptor

In a complex application, we may need to intercept requests. For example, for each request, token verification information needs to be added to the request header before sending.

The following is an example of a request interceptor:

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));
      },
    });
  });
}

In this encapsulation function, we use the uni.addInterceptor() function to add token verification information to the request. Such an encapsulation method can achieve unified management and processing of each request.

Summary

As a front-end developer, the readability and maintainability of code have always been an indispensable issue. In uniapp, we should achieve this goal by encapsulating API requests to improve code reusability and code readability as much as possible. At the same time, in packaging requests, we optimize the packaging method according to the actual needs of each project to achieve more efficient request operations.

The above is the detailed content of uniapp request encapsulation. For more information, please follow other related articles on the PHP Chinese website!