uniapp에서 기본 요청 방법을 수정하는 방법

프런트엔드 기술이 지속적으로 업데이트되면서 점점 더 많은 개발자가 개발에 uniapp을 사용하기 시작했습니다. 이 크로스 플랫폼 개발 프레임워크를 통해 개발자는 하나의 코드만 작성하고 여러 플랫폼에서 실행할 수 있습니다. 그러나 uniapp을 개발에 사용할 때 몇 가지 문제가 발생할 수 있습니다. 예를 들어 기본 네트워크 요청 방법이 특정 상황에 적합하지 않아 수정이 필요할 수 있습니다. 이 글에서는 uniapp의 기본 요청 메소드를 수정하는 방법을 소개합니다.

uniapp의 기본 네트워크 요청 방식은 uni.request()를 사용하는 것인데, 이는 wx.request()를 캡슐화한 방식으로 다양한 플랫폼에서 사용할 수 있습니다. 이 방법은 기본적으로 GET 요청을 사용하며, 매개변수를 전달하여 URL, 요청 헤더 등과 같은 요청의 일부 구성을 변경할 수 있습니다.

그러나 실제 개발에서는 POST, PUT 등과 같은 다른 요청 방법을 사용해야 할 수도 있습니다. 이때 여러 요청 메서드를 지원하려면 uni.request()를 캡슐화해야 합니다. 다음은 Promise를 사용하여 uni.request()를 캡슐화하는 샘플 코드입니다.

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

이 메소드는 URL, 요청 메소드 및 요청 데이터의 세 가지 매개변수를 허용하고 Promise 객체를 반환합니다. 실제 사용에서는 이 메소드를 호출하고 해당 매개변수를 전달하여 다양한 요청 메소드를 구현할 수 있습니다.

예를 들어 POST 요청을 사용해야 하는 경우 다음과 같이 호출할 수 있습니다.

request('http://example.com/api/user', 'POST', {username: 'admin', password: '123456'})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

마찬가지로 PUT 요청을 사용해야 하는 경우 요청 방법을 PUT으로 변경하기만 하면 됩니다.

요청 방법을 수정하는 것 외에도 요청 헤더와 요청 매개변수를 수정할 수도 있습니다. 예를 들어 모든 요청에 ​​토큰 확인을 추가해야 하는 경우 헤더 매개변수를 수정할 수 있습니다.

let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'

uni.request({
  url: 'http://example.com/api',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + token
  },
  success: res => {
    console.log(res.data)
  },
  fail: err => {
    console.error(err)
  }
})

그러면 각 요청의 헤더에 Authorization 매개변수가 추가됩니다.

단일 요청에 매개변수를 추가하는 것 외에도 전역 구성에서 기본 매개변수를 수정할 수도 있습니다. uniapp은 main.js 파일에서 구성할 수 있는 $https 구성 매개변수를 제공합니다.

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

Vue.prototype.$https = uni.request
const baseUrl = 'http://example.com/api'

uni.$https.defaults.baseURL = baseUrl
uni.$https.defaults.header = {
  'content-type': 'application/json'
}

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

위 코드에서는 uni.request를 Vue.prototype.$https에 할당하고 이를 사용할 때 $를 직접 호출할 수 있습니다. 네트워크 요청의 경우 https입니다. 또한 baseURL 및 헤더와 같은 전역 기본 매개변수를 저장하기 위해 $https에 기본 속성을 추가했습니다.

기본 요청 방법을 수정한 후 브라우저가 도메인 간 요청을 가로채는 등의 문제가 발생할 수 있습니다. 이 문제는 도중에 오류가 발생하는 경우 서버 측에서 도메인 간 액세스를 구성하여 해결할 수 있습니다. 요청 프로세스에서 오류를 잡아서 적절하게 처리할 수 있습니다.

즉, uniapp은 유연한 네트워크 요청 방법을 제공합니다. 실제 개발에서 개발자는 필요에 따라 다양한 요청 방법과 요청 매개변수를 자유롭게 선택하여 보다 정교한 네트워크 요청 요구 사항을 달성할 수 있습니다.

위 내용은 uniapp에서 기본 요청 방법을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!