HTTP 요청을 위해 UNI-APP의 UNI.Request API를 어떻게 사용합니까?

http 요청을 위해 Uni.request API를 사용하는 방법

uni.request API의 Uni-App은 다양한 서버에 HTTP 요청을하는 다재다능한 도구입니다. 기본 xmlhttprequest 객체 주변의 래퍼로보다 편리하고 교차 플랫폼 접근 방식을 제공합니다. 다음은 사용 방법에 대한 자세한 고장입니다.

기본 사용 :

핵심 함수는 uni.request() 이며 옵션 객체를 인수로 사용합니다. 이 개체는 요청 세부 사항을 지정합니다. 간단한 GET 요청은 다음과 같습니다.

 <code class="javascript">uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('Request successful:', res.data); }, fail: (err) => { console.error('Request failed:', err); }, complete: (res) => { console.log('Request completed:', res); } });</code>

이 코드는 GET 요청을 https://api.example.com/data 로 보냅니다. success 콜백은 성공적인 응답을 처리하고 fail 오류를 처리하며 성공 또는 실패에 관계없이 complete 실행을 수행합니다. res.data 에는 응답 데이터가 포함되어 있습니다.

고급 옵션 :

uni.request 요청을 사용자 정의하기위한 다양한 옵션을 지원합니다.

• method : HTTP 메소드를 지정합니다 (Get, Post, Put, Delete 등). 기본값을 얻습니다.
• data : 요청과 함께 보낼 데이터 (일반적으로 Post, Put 등). 이것은 객체 또는 문자열 일 수 있습니다.
• header : HTTP 헤더가 포함 된 객체 (예 : Content-Type , Authorization ).
• dataType : 응답의 예상 데이터 유형을 지정합니다 ( 'JSON'은 일반적입니다).
• responseType : 예상 응답 유형 ( 'text', 'arraybuffer'등을 지정합니다.
• timeout : 요청의 시간 초과를 밀리 초로 설정합니다.

사후 요청 예 :

 <code class="javascript">uni.request({ url: 'https://api.example.com/submit', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { name: 'John Doe', email: 'john.doe@example.com' }, success: (res) => { // ... }, fail: (err) => { // ... } });</code>

Uni-App에서 Uni.request를 사용할 때 일반적인 오류 처리 기술은 무엇입니까?

원활한 사용자 경험을 위해서는 강력한 오류 처리가 중요합니다. 다음은 uni.request 로 오류를 처리하는 일반적인 기술입니다.

• fail 콜백 : fail 콜백은 기본 메커니즘입니다. 실패에 대한 정보가 포함 된 오류 객체 (예 : 상태 코드, 오류 메시지)를 수신합니다. 이를 사용하여 사용자에게 유익한 오류 메시지를 제공하거나 디버깅 오류를 기록하십시오.
• 상태 코드 확인 : fail 콜백에서 HTTP 상태 코드를 확인하십시오 (또는보다 포괄적 인 처리를 위해 complete ). 다른 상태 코드는 다른 문제를 나타냅니다 (404 찾기, 500 개의 내부 서버 오류 등). 맞춤형 사용자 피드백을 제공하여 이러한 사례를 다르게 처리하십시오.
• 네트워크 오류 처리 : 네트워크 연결 문제를 감지합니다. 인터넷 연결 부족으로 인해 uni.request 실패 할 수 있습니다. uni.getSystemInfoSync().networkType 사용하여 네트워크 상태를 확인하기 위해 네트워크 상태를 확인하거나 fail 콜백 내에서 구체적으로 네트워크 오류를 처리 할 수 ​​있습니다.
• 시도 ... 캐치 블록 : 콜백을 이미 제공하는 uni.request 에서는 덜 일반적이지만 uni.request 호출을 try...catch 요청 자체 외부에서 발생할 수있는 예기치 않은 오류 (예 : JSON 구문 분석 오류)를 잡을 수 있습니다.
• 일반적인 오류 처리 : 특정 오류가 불분명하거나 너무 기술적 인 경우 사용자에게 일반 오류 메시지를 제공합니다. 디버깅 목적으로 전체 오류 세부 정보를 기록하십시오.

상태 코드 점검의 예 :

 <code class="javascript">uni.request({ // ... request options ... fail: (err) => { if (err.statusCode === 404) { uni.showToast({ title: 'Resource not found', icon: 'error' }); } else if (err.statusCode === 500) { uni.showToast({ title: 'Server error', icon: 'error' }); } else { uni.showToast({ title: 'An error occurred', icon: 'error' }); console.error('Request failed:', err); } } });</code>

UNI.Request를 UNI-APP 프로젝트의 인증 시스템과 어떻게 통합하려면?

uni.request 인증 시스템과 통합하려면 일반적으로 각 요청에 권한 부여 헤더를 추가하는 것이 포함됩니다. 이 헤더에는 일반적으로 인증 된 사용자를 식별하는 토큰 (JWT, 세션 ID 등)이 포함되어 있습니다.

구현:

1. 토큰 저장소 : 인증 토큰을 단단히 저장합니다 (예 : uni.setStorageSync 및 uni.getStorageSync 사용하여 UNI-APP의 스토리지에).
2. 헤더 주입 : 각 요청을하기 전에 토큰을 검색하여 header 개체에 추가하십시오.

 <code class="javascript">const token = uni.getStorageSync('token'); uni.request({ url: 'https://api.example.com/protected-data', header: { 'Authorization': `Bearer ${token}` // Adjust as needed for your auth scheme }, success: (res) => { // ... }, fail: (err) => { // Handle authentication errors (eg, 401 Unauthorized) if (err.statusCode === 401) { // Redirect to login or refresh token } } });</code>

3. 토큰 새로 고침 : 인증 시스템이 단기적인 토큰을 사용하는 경우 토큰 새로 고정 구현. 토큰의 만료를 확인하고 만료되기 전에 자동으로 새로 고치십시오. 여기에는 일반적으로 토큰 새로 고침 엔드 포인트에 별도의 요청이 포함됩니다.
4. 오류 처리 : 인증 오류 (401 무단)를 적절하게 처리합니다. 여기에는 사용자를 로그인 페이지로 리디렉션하거나 다시 인증하라는 메시지가 포함될 수 있습니다.

Uni.Request를 사용하여 UNI-APP 프로젝트에서 파일을 업로드 할 수 있습니까?

예, uni.request 파일을 업로드 할 수 있지만 formData API를 사용해야합니다. 방법은 다음과 같습니다.

구현:

1. FormData 만들기 : FormData 객체를 작성하고 파일을 추가하십시오. 적절한 Uni-App 파일 선택 API (예 : uni.chooseImage 또는 uni.chooseVideo )를 사용하여 파일에 액세스해야합니다.
2. 컨텐츠 유형 설정 : Content-Type 헤더를 multipart/form-data 로 설정하십시오.
3. 요청을 보내십시오 : FormData 객체를 사용하여 data 로 보내는 게시물 요청을 보내십시오.

예:

 <code class="javascript">uni.chooseImage({ count: 1, success: (res) => { const filePath = res.tempFiles[0].path; const formData = new FormData(); formData.append('file', { uri: filePath, name: 'file.jpg', // Adjust filename as needed type: 'image/jpeg' // Adjust file type as needed }); uni.request({ url: 'https://api.example.com/upload', method: 'POST', header: { 'Content-Type': 'multipart/form-data' }, data: formData, success: (res) => { // ... }, fail: (err) => { // ... } }); } });</code>

업로드 된 파일에 따라 name 과 type 속성을 조정해야합니다. 서버 측은 multipart/form-data 업로드를 처리하도록 구성해야합니다. 또한 진행 상황 표시기를 사용하여 더 나은 사용자 경험을 위해 사용자에게 업로드 진행 상황을 표시하는 것을 고려하십시오. 일반적으로 기본 uni.request 넘어서 다른 접근 방식이 필요합니다.

위 내용은 HTTP 요청을 위해 UNI-APP의 UNI.Request API를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!