0에서 1까지 자율 학습 WeChat 애플릿: 프로젝트 구축 후 http 요청 캡슐화

1. http 모듈 재패키징

먼저 WeChat의 http 모듈을 재패키징해야 하는 이유는 무엇입니까? 먼저 WeChat에 내장된 http 요청이 어떻게 작성되는지 살펴보겠습니다.

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

이 요청 방법은 고대 For jquery 패키징과 유사합니다. 성공 콜백 함수에서 몇 가지 비즈니스 작업을 수행해야 합니다. 동시에 코드가 충분히 직관적이지 않고 코드가 너무 번거롭습니다. 이 메소드는 나눕니다. 1. 프로젝트 디렉터리 구성

http 요청 캡슐화를 수행하려면 utils 디렉터리 아래에 request.js 파일을 만듭니다. 약속을 통한 캡슐화는 도움이 됩니다. 오류를 처리하고 비즈니스 로직도 매우 직관적으로 볼 수 있습니다. 캡슐화 샘플 코드는 다음과 같습니다.

/**
 * 
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
 */
function request(url, data={}, method='GET', header="Content-Type: application/json",) {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: 'json',
            responseType: 'text',
            success: (res)=>{
                if(res.statusCode === 200) {
                    if (res.data.code === 200) {
                        resolve(res.data)
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: 'none',
                            image: '',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                resolve(res.data);
                            },
                        });
                    }
                } else {
                   
                }
            },
            fail: (res)=>{
                // 需要我们加上统一的错误处理代码
                reject(res)
            },
            complete: ()=>{}
        });
    }) 
}

// 封装方法
// 如果对于header有什么特殊的要求，可以在请求参数里面做一些添加，例如后续我们会在headder中加入我们的sessionkey这些内容
// header = {}里面添加header内容
// 这块是一个简版的说明
const header = {
    "Content-Type": "application/json",
    // 这个token是微信登录以后，将token存入在缓存中
    "token": "*****************"
}

const get = function(url, data, header) {
    return request(url, data, 'GET', header);
}

const post = function(url, data, header) {
    return request(url, data, 'POST', header);
}

const del = function(url, data, header) {
    return request(url, data, '', header);
}


module.exports = {
    get,
    post,
    del,
}

2. 프로젝트에서 요청 사용

우선 캡슐화된 http 모듈을 소개합니다

import webHttp from './utils/request';

다음으로, 캡슐화된 webhttp 도구를 사용할 수 있는데, 이전에 WeChat의 요청 요청 방식을 직접 사용했던 것에 비해 코드 양이 줄어드는 동시에 체인 방식을 사용하면 로직이 더욱 명확해집니다

webHttp.get(api.user.info, {
    // nick_name: 
    ...self.globalData.userInfo
}).then((res) => {
    console.log(res);
})

아마도 그런 과정일 것입니다. 실제 프로세스에서는 백엔드 Restful API 방식에 따라 캡슐화를 더욱 개선해야 할 수도 있습니다. 이 경우에는 게시 요청의 데이터 매개변수도 다르게 처리해야 합니다. 기사가 도움이 됩니다. 더 좋은 방법이 있으면 소통하고 환영합니다. 진행은 멈추지 않습니다

추천 튜토리얼: "

WeChat Mini Program

"

위 내용은 0에서 1까지 자율 학습 WeChat 애플릿: 프로젝트 구축 후 http 요청 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!