uniapp requrst에서 공개 헤더를 설정하는 방법(두 가지 방법)

개발 과정에서 우리는 종종 UniApp을 사용하여 크로스 플랫폼 애플리케이션을 구축합니다. UniApp은 Vue.js를 기반으로 하는 오픈 소스 프레임워크로 Vue.js 코어와 일부 크로스 플랫폼 기능을 함께 패키지하여 완전한 개발 경험을 제공할 수 있습니다. 개발 과정에서 데이터를 얻기 위해 네트워크 요청을 보내야 하는 경우가 많습니다. 이때 요청의 정확성과 효율성을 보장하기 위해 일부 공개 헤더 매개변수를 설정해야 합니다.

UniApp에서는 캡슐화된 uni.request를 사용하여 네트워크 요청을 보낼 수 있습니다. uni.request는 우수한 크로스 플랫폼 성능을 가지고 있으며 UniApp의 기본 XMLHttpRequest 및 기본 axios 확장을 캡슐화하고 HTTP/HTTPS 요청을 시작하는 데 사용할 수 있습니다. 공개 헤더 매개변수를 설정하는 데에는 다음 두 가지 일반적인 방법이 있습니다.

방법 1: 요청 옵션에

// main.js
Vue.prototype.$http = function (url, data, method) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  return uni.request({
    url,
    data,
    method,
    header
  })
}

// 调用
this.$http('/api/user', { id: 123, name: 'Tom' }, 'GET').then(res => {
  console.log(res)
})

를 설정합니다. 그 중 $ttp 메소드는 main.js에 정의되어 있으며, 공개 헤더 매개변수는 옵션에서 설정되며, 호출 시 특정 매개변수를 전달할 수 있습니다.

방법 2: 인터셉터를 통한 통합 설정

// request.js
export function request(opts) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  const interceptor = {
    request: (opts) => {
      opts.header = header;
      return opts;
    },
    response: (res) => {
      const { statusCode, data } = res;
      if (statusCode === 200) {
        return data;
      } else {
        uni.showToast({
          title: '请求失败',
          icon: 'none'
        })
        return Promise.reject(res);
      }
    }
  }
  uni.addInterceptor(interceptor);
  return uni.request(opts).finally(() => {
    uni.removeInterceptor(interceptor);
  })
}

// 调用
request({
  url: '/api/user?id=123&name=Tom',
  method: 'GET'
}).then(res => {
  console.log(res);
})

이 방법에서는 요청 함수를 정의하고 인터셉터를 통해 요청을 가로채고 함수에 공개 헤더 매개변수를 설정한 다음 uni.request를 통해 요청을 시작합니다. 요청을 호출할 때 특정 매개변수만 전달하면 됩니다.

결론적으로 보면, UniApp에서는 공개 헤더 매개변수를 설정하는 것이 어렵지 않다는 것을 알 수 있습니다. uni.request의 옵션에서만 설정해도 되고, 인터셉터를 통해 균일하게 설정할 수도 있습니다. code 재사용성을 높이고 반복되는 코드 작성을 줄이는 것이 좋은 선택입니다.

위 내용은 uniapp requrst에서 공개 헤더를 설정하는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!