WeChat 애플릿에서 네트워크 요청을 간단하게 캡슐화

이 글은 주로 WeChat 미니 프로그램의 네트워크 요청의 간단한 캡슐화 예시에 대한 관련 정보를 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

WeChat 미니 프로그램의 네트워크 요청의 간단한 캡슐화 예시에 대한 자세한 설명

구현 WeChat 미니 프로그램 요청의 네트워크는 Android보다 훨씬 간단하게 느껴집니다. 네트워크 요청 문제를 해결하려면 WeChat에서 제공하는 API만 사용하면 됩니다.

• 일반 HTTPS 요청(wx.request)

• 파일 업로드(wx.uploadFile)

• 파일 다운로드(wx.downloadFile)

• WebSocket 통신(wx.connectSocket)
  

데이터 보안을 위해 WeChat 애플릿 네트워크 요청은 https만 지원합니다. 물론 각 매개변수의 의미는 자세히 설명되지 않습니다. 이에 익숙하지 않은 경우 공식 문서의 네트워크 요청 API를 읽어보세요. 요청을 사용할 때 헤더의 기본 콘텐츠 유형은 application/json이며 문서에는 메서드 값이 대문자여야 한다고 명시되어 있지만 테스트 후에는 소문자로도 요청이 성공할 수 있습니다. 요청의 기본 시간 초과는 60초입니다. 시간 초과를 사용자 정의하려면 app.json에 다음 코드 조각을 추가하여 요청, 소켓, 업로드된 파일 및 다운로드된 파일에 대한 시간 초과를 각각 설정할 수 있습니다.

"networkTimeout": {
  "request": 5000,
  "connectSocket": 5000,
  "uploadFile": 5000,
  "downloadFile": 5000
 }

시간 제한을 설정한 후 우리가 일반적으로 접하는 네트워크 요청은 일반적으로 두 가지 범주로 나누어집니다. 하나는 대화 상자를 로드하지 않고 백그라운드에서 실행되는 것이고, 다른 하나는입니다. 첫 번째는 데이터가 로드되고 있다는 프롬프트와 같은 프롬프트가 있다는 것입니다. 그런 다음 이를 캡슐화하는 단서로 사용합니다. 먼저 네트워크에 대한 네트워크 요청 도구 클래스를 생성한 다음

// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
  wx.showLoading({
   title: message,
  })
 wx.request({
  url: url,
  data: params,
  header: {
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
    wx.hideLoading()
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
    wx.hideLoading()
    fail()
  },
  complete: function (res) {

  },
 })
}

위 함수는 네트워크 요청이 시작되기 전에 코드에서 매개변수의 의미를 설명하기 쉽습니다. 현재 네트워크가 요청 데이터임을 사용자에게 알리기 위해 표시됩니다. 네트워크 요청이 성공하거나 실패하면 wx.hideLoading()을 호출하여 프롬프트 상자 표시를 취소합니다. 또한 API는 현재 페이지의 탐색 표시줄 로딩 애니메이션을 표시하기 위해 wx.showNavigationBarLoading()을 제공합니다. 이 애니메이션을 표시하려면 requestLoading 실행 시작 시 wx.showNavigationBarLoading()을 호출한 다음 호출할 수 있습니다. 네트워크 요청이 성공하거나 실패합니다. wx.hideNavigationBarLoading()은 탐색 표시줄 로딩 애니메이션을 숨깁니다.

네트워크 요청이 성공하고 상태 코드가 200이면 요청된 데이터는 성공(res.data)을 통해 우리 메서드로 다시 호출됩니다. 물론 위에서는 실패 이유를 분석하지 않았습니다. 또한 실패 콜백을 제공합니다. 예를 들어 res.statusCode ==500인 경우 내부 서버 오류 메시지가 표시됩니다. 네트워크를 확인하세요. res.statusCode ==404, 주소 등을 찾을 수 없습니다.

그런 다음 대화 상자를 표시하지 않고 사용자 배경에서 데이터를 요청하는 요청 함수를 생성합니다. 코드를 덜 작성하기 위해 다음과 같이 위 함수를 공유합니다

//不显示对话框的请求
function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}

결국 requestLoading을 호출하면 이 함수에서 판단을 내릴 수 있습니다. message=='' 메시지가 표시되면 대화 상자가 표시되지 않습니다.

최종 코드

function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
 wx.showNavigationBarLoading()
 if (message != "") {
  wx.showLoading({
   title: message,
  })
 }
 wx.request({
  url: url,
  data: params,
  header: {
   //'Content-Type': 'application/json'
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   fail()
  },
  complete: function (res) {

  },
 })
}
module.exports = {
 request: request,
 requestLoading: requestLoading
}

는 다음과 같이 사용하기 매우 간단합니다

//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
  network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {
  //res就是我们请求接口返回的数据
   console.log(res)
  }, function () {
   wx.showToast({
    title: '加载数据失败',
   })
  })
}

위는 이 글의 전체 내용입니다. 모두의 학습에 도움이 되기를 바랍니다. 결제해 주세요. 더 많은 관련 콘텐츠를 보려면 PHP에 주목하세요. 중국어 웹사이트!

관련 권장 사항:

WeChat Mini 프로그램의 웹 페이지 콘텐츠 분석 소개

WeChat Mini 프로그램의 프레임 분석 정보

WeChat Mini 프로그램 요청 인터페이스의 캡슐화 소개

위 내용은 WeChat 애플릿에서 네트워크 요청을 간단하게 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!