uniapp 요청 캡슐화

모바일 애플리케이션의 급속한 발전으로 인해 프런트엔드 프레임워크는 점점 더 다양해지고 있습니다. 그 중 Vue.js를 기반으로 한 크로스 플랫폼 개발 프레임워크인 uniapp은 모바일 애플리케이션 개발에 점점 더 많이 사용되고 있습니다.

프론트엔드 개발자로서 유니앱을 개발할 때 데이터 상호작용을 위해 많은 API나 서버 인터페이스를 사용하는 경우가 많습니다. 데이터 요청 프로세스 동안 우리는 네트워크 통신, 데이터 형식, 데이터 보안 및 기타 문제를 고려해야 하며 코드의 가독성과 유지 관리 가능성도 보장해야 합니다. 이러한 문제를 해결하기 위해 API 요청을 캡슐화하여 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다.

이제 유니앱의 요청 캡슐화를 소개하겠습니다.

1. 네트워크 요청

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 및 요청 데이터를 전달해야 합니다. 또한 이 함수는 요청 헤더, 요청 성공 및 요청 실패 콜백 함수도 정의합니다.

2. 통합 오류 처리

요청을 캡슐화하는 과정에서 요청의 오류 처리를 고려해야 합니다. 오류 처리 과정에서 오류 코드를 균일하게 처리하여 코드의 유지 관리성을 향상시킬 수 있습니다. 다음은 일반적인 오류 코드 처리 예입니다.

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

이 캡슐화된 함수에서는 다양한 유형의 오류 코드를 판단하여 다양한 오류 프롬프트 메시지를 정의합니다. 이 접근 방식을 사용하면 코드를 더 쉽게 유지 관리할 수 있습니다.

3. 요청 구성

자주 사용되는 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 매개변수는 요청 헤더에 추가되어 보다 유연한 요청 구성을 달성합니다.

4. 요청 인터셉터

복잡한 애플리케이션에서는 요청을 가로채야 할 수도 있습니다. 예를 들어, 각 요청에 대해 전송하기 전에 요청 헤더에 토큰 확인 정보를 추가해야 합니다.

다음은 요청 인터셉터의 예입니다.

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() 함수를 사용하여 요청에 토큰 확인 정보를 추가합니다. 이러한 캡슐화 방법을 사용하면 각 요청을 통합적으로 관리하고 처리할 수 있습니다.

요약

프론트엔드 개발자로서 코드 가독성과 유지관리성은 항상 없어서는 안 될 문제였습니다. uniapp에서는 코드 재사용성과 코드 가독성을 최대한 향상시키기 위해 API 요청을 캡슐화하여 이 목표를 달성해야 합니다. 동시에 패키징 요청 시 각 프로젝트의 실제 요구 사항에 따라 패키징 방법을 최적화하여 보다 효율적인 요청 작업을 달성합니다.

위 내용은 uniapp 요청 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!