미니 프로그램에서 네트워크 요청을 다시 캡슐화하는 방법

이 글에서는 WeChat 애플릿 개발 중 네트워크 요청 캡슐화를 소개하고, 2차 캡슐화 이유와 구체적인 캡슐화 구현에 대해 설명하겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 배경

WeChat 미니 프로그램을 개발할 때 필연적으로 네트워크 요청 작업이 포함됩니다. 미니 프로그램에서 제공하는 기본 네트워크 요청 API는 다음과 같습니다.

wx.request({
  url: 'https://test.com/******', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

그 중:

• url: 요청의 배경 인터페이스 주소입니다.

• data: 요청 인터페이스가 전달해야 하는 매개변수입니다.

• header: 요청 헤더를 설정합니다. content-type 기본값은 application/json입니다. 성공: 요청이 성공했는지 여부 콜백 후 res에는 요청 성공 후 반환된 데이터가 포함됩니다.

• wx.request 사용법에 대한 자세한 내용은 공식 소개를 참조하세요.

RequestTask | WeChat Open Document

공식 API를 제공했는데 왜 다시 캡슐화해야 할까요?

2. 2차 캡슐화를 하는 이유

첫 번째 포인트는 코드 중복을 피하기 위함입니다

코드 중복 방지는 주로 다음 사항에 반영됩니다.1) 저희 회사에서는 백엔드 인터페이스를 호출하는데, 로그인 인터페이스 외에도 다른 인터페이스 요청은 요청 헤더에 토큰을 추가해야 하며, 캡슐화가 없으면 네트워크 요청이 이루어질 때마다 토큰을 전달해야 하는데 이는 매우 번거로운 작업입니다.

2) 네트워크 요청을 할 때 사용자에게 로딩 중임을 알리는 로딩 상자를 제공해야 하는 경우가 많습니다.... 아래 그림과 같이:

캡슐화가 없으면 각 네트워크 요청마다 로딩 상자가 나타나면 다음 코드를 반복해서 작성해야 합니다. 요청이 시작되면 로딩 상자를 표시합니다.

요청이 끝나면 로딩 상자를 숨깁니다.

두 번째 포인트, 콜백 지옥을 피하세요

페이지에 여러 네트워크 요청이 있고 요청에 특정 순서(wx)가 있는 경우. 요청은 비동기 작업이므로 가장 직접적인 결과는 다음 코드입니다.

onLoad: function () {
    wx.request({
      url: 'https://test.com/api/test01',
      success:res=>{
        wx.request({
          url: 'https://test.com/api/test02',
          success: res=>{
            wx.request({
              url: 'https://test.com/api/test03',
              success: res=>{
                testDataList: res.content
              }
            })
          }
        })
      }
    })
  },

러시아 마트료시카 인형과 매우 비슷하지 않나요?

이러한 작성 방식을 피하기 위해 당연히 캡슐화하고 여기서는 Promise를 사용합니다.

Prolise에 대한 소개는 Liao Xuefeng의 공식 홈페이지에 가시면 자세히 보실 수 있습니다.

https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

3. 특정 패키징 구현

프로젝트 구조:

utils 폴더 아래에 생성됨 2 파일.

1) httpUtils.js

Encapsulation of network request, 구체적인 코드는 다음과 같습니다.

const ui = require('./ui');
const BASE_URL = 'https://www.wanandroid.com'


/**
 * 网络请求request
 * obj.data 请求接口需要传递的数据
 * obj.showLoading 控制是否显示加载Loading 默认为false不显示
 * obj.contentType 默认为 application/json
 * obj.method 请求的方法  默认为GET
 * obj.url 请求的接口路径 
 * obj.message 加载数据提示语
 */
function request(obj) {
    return new Promise(function(resolve, reject) {
      if(obj.showLoading){
        ui.showLoading(obj.message? obj.message : '加载中...');
      }
      var data = {};
      if(obj.data) {
        data = obj.data;
      }
      var contentType = 'application/json';
      if(obj.contentType){
        contentType = obj.contentType;
      } 
  
      var method = 'GET';
      if(obj.method){
        method = obj.method;
      }
  
      wx.request({
        url: BASE_URL + obj.url,
        data: data,
        method: method,
        //添加请求头
        header: {
          'Content-Type': contentType ,
          'token': wx.getStorageSync('token') //获取保存的token
        },
        //请求成功
        success: function(res) {
          console.log('===============================================================================================')
          console.log('==    接口地址：' + obj.url);
          console.log('==    接口参数：' + JSON.stringify(data));
          console.log('==    请求类型：' + method);
          console.log("==    接口状态：" + res.statusCode);
          console.log("==    接口数据：" + JSON.stringify(res.data));
          console.log('===============================================================================================')
          if (res.statusCode == 200) {
            resolve(res);
          } else if (res.statusCode == 401) {//授权失效
            reject("登录已过期");
            jumpToLogin();//跳转到登录页
          } else {
            //请求失败
            reject("请求失败：" + res.statusCode)
          }
        },
        fail: function(err) {
          //服务器连接异常
          console.log('===============================================================================================')
          console.log('==    接口地址：' + url)
          console.log('==    接口参数：' + JSON.stringify(data))
          console.log('==    请求类型：' + method)
          console.log("==    服务器连接异常")
          console.log('===============================================================================================')
          reject("服务器连接异常，请检查网络再试");
        },
        complete: function() {
          ui.hideLoading();
        }
      })
    });
  }
  

  //跳转到登录页
  function jumpToLogin(){
    wx.reLaunch({
      url: '/pages/login/login',
    })
  }
  
  module.exports = {
    request,
  }

코드에 자세한 설명이 있으니 여기서는 설명하지 않겠습니다.

2) ui.js

은 주로 wx UI 작업의 간단한 캡슐화이며 코드는 다음과 같습니다.

export const showToast = function(content,duration) {
    if(!duration) duration = 2000
    wx.showToast({
        title: content,
        icon: 'none',
        duration: duration,
    })
  }
  
  var isShowLoading = false
  export const showLoading = function(title) {
    if(isShowLoading) return
    wx.showLoading({
        title: title?title:'',
        mask:true,
        success:()=>{
            isShowLoading = true
        }
    })
  }
  
  export const hideLoading = function() {
    if(!isShowLoading) return
    isShowLoading = false
    wx.hideLoading()
  }

3) 특정 호출

이 인덱스에서 네트워크 요청을 했습니다. 구체적으로 코드는 다음과 같습니다.

// index.js
const httpUtils = require('../../utils/httpUtils')
const ui = require('../../utils/ui')

Page({
  data: {
    str:null,
  },

  onLoad() {
  },

  //获取接口数据
  getNetInfo(){
    let obj = {
      method: "POST",
      showLoading: true,
      url:`/user/register?username=pppooo11&password=pppooo&repassword=pppooo`,
      message:"正在注册..."
    }
    httpUtils.request(obj).then(res=>{
      this.setData({
        str:JSON.stringify(res)
      })
      ui.showToast(res.data.errorMsg)
    }).catch(err=>{
      console.log('ERROR')
    });
  }
})

알겠습니다. 여기까지입니다. 위 내용이 도움이 되었다면 좋아요를 눌러주세요.

코드가 github에 업로드되었습니다. 관심이 있으시면 클릭하여 다운로드하실 수 있습니다.

https://github.com/YMAndroid/NetWorkDemo

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개

를 방문하세요! !

위 내용은 미니 프로그램에서 네트워크 요청을 다시 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!