네이티브 미니 프로그램은 어떻게 요청을 캡슐화하고 인터페이스를 우아하게 호출할 수 있습니까?

WeChat 애플릿은 기본 요청을 어떻게 캡슐화하나요? 인터페이스를 호출하는 방법은 무엇입니까? 다음 기사에서는 기본 WeChat 애플릿에서 요청을 캡슐화하고 인터페이스를 우아하게 호출하는 방법을 소개합니다. 도움이 되기를 바랍니다.

이 문서는 기본 WeChat 애플릿 요청을 요약한 코드 조각입니다. 참고로 개인적인 글쓰기 습관이 있습니다.

미니 프로그램 기본 요청 기반프라미스 스타일 요청 캡슐화
다단계 콜백 방지(콜백 지옥)
네트워크 요청 오류 처리 및 배포 통합

디렉터리 구조

.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── env.js // 环境配置
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...

관련 코드

구성 파일

env.js

// env.js
module.exports = {
  ENV: 'production',
  // ENV: 'test'
}

statusCode.js

// statusCode.js
// 配置一些常见的请求状态码
module.exports = {
  SUCCESS: 200,
  EXPIRE: 403
}

config.js

// config.js
const { ENV } = require('./env')
let BASEURL

switch (ENV) {
  case 'production':
    BASEURL = ''
    break
  case 'test':
    BASEURL = ''
    break
  default:
    BASEURL = ''
    break
}
module.exports = {
  BASEURL,// 项目接口地址，支持多域名
}

주요 기능

note 64~68행은 로그인을 호출할 때 토큰이 app.globalData에 있는지 확인합니다. 토큰이 만료되고 토큰이 지워지면 로그인 요청이 시작되지 않습니다. 다음 요청에서 다시 시작됩니다. 그러면 새 토큰이 다시 획득됩니다

// 引入状态码statusCode
const statusCode = require('./statusCode')
// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL
const { BASEURL } = require('./config')
// 定义默认参数
const defaultOptions = {
  data: {},
  ignoreToken: false,
  form: false,
}
/**
 * 发送请求
 * @params
 * method: <String> 请求方式: POST/GET
 * url: <String> 请求路径
 * data: <Object> 请求参数
 * ignoreToken: <Boolean> 是否忽略token验证
 * form: <Boolean> 是否使用formData请求
 */
function request (options) {
  let _options = Object.assign(defaultOptions, options)
  let { method, url, data, ignoreToken, form } = _options
  const app = getApp()
  // 设置请求头
  let header = {}
  if (form) {
    header = {
      &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;
    }
  } else {
    header = {
      &#39;content-type&#39;: &#39;application/json&#39; //自定义请求头信息
    }
  }
  if (!ignoreToken) {
    // 从全局变量中获取token
    let token = app.globalData.token
    header.Authorization = `Bearer ${token}`
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASEURL + url,
      data,
      header,
      method,
      success: (res) => {
        let { statusCode: code } = res
        if (code === statusCode.SUCCESS) {
          if (res.data.code !== 0) {
            // 统一处理请求错误
            showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
          resolve(res.data)
        } else if (code === statusCode.EXPIRE) {
          app.globalData.token = &#39;&#39;
          showToast(`登录过期, 请重新刷新页面`)
          reject(res.data)
        } else {
          showToast(`请求错误${url}, CODE: ${code}`)
          reject(res.data)
        }
      },
      fail: (err) => {
        console.log(&#39;%c err&#39;, &#39;color: red;font-weight: bold&#39;, err)
        showToast(err.errMsg)
        reject(err)
      }
    })
  })
}

// 封装toast函数
function showToast (title, icon=&#39;none&#39;, duration=2500, mask=false) {
  wx.showToast({
    title: title || &#39;&#39;,
    icon,
    duration,
    mask
  });
}

function get (options) {
  return request({
    method: &#39;GET&#39;,
    ...options
  })
}

function post (options) {
  // url, data = {}, ignoreToken, form
  return request({
    method: &#39;POST&#39;,
    ...options
  })
}

module.exports = {
  request, get, post
}

Usage

새 파일 만들기

새 API 파일을 만들고(여기에서는 주문 인터페이스를 예로 사용) 새 파일을 만듭니다. api/index.js (동일한 파일에 쓸 때 인터페이스가 너무 장황해지지 않도록 통합 인터페이스 배포 처리)api/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:

.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── index.js  // 统一处理入口
│   ├── order.js  // 订单接口
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...

引入request

// order.js
const request = require('./request')

module.exports = {
  // data可以传入 url, data, ignoreToken, form, cToken
  apiName (data) {
    let url = 'apiUrl'
    return request.post({ url, data })
  }
}

统一分发接口

const orderApi = require("./order")

module.exports = {
  orderApi
}

页面引用

const { orderApi } = require('dir/path/api/index')
...
1. `Promise.then()`链式调用
func () {
  orderApi.apiName(params).then(res => {
    // do Something
  }).catch(err => {
    // do Something
  })
}

2. `async/await` 调用
async func () {
  try {
    let res = await orderApi.apiName(params)
    // do Something
  } catch (err) {
    // do Something
  }
}

options取值

rrreee

요청 소개

rrreee

통합 배포 인터페이스

rrreee

페이지 참조

参数	说明	数据类型	默认值
url	接口名	String	''
data	请求体	Object	{}
ignoreToken	请求是否携带token	Boolean	false
form	是否是表单请求	Boolean	false디렉토리 구조는 다음과 같습니다.

rrreee

옵션 값

매개변수	설명	데이터 유형	기본값
url	인터페이스 이름	문자열🎜	' '🎜🎜
data🎜	요청 본문🎜객체🎜	{}🎜🎜
ignoreToken🎜	요청에 토큰이 전달되는지 여부🎜	부울 code>🎜<td> <code>false🎜🎜
form🎜	양식 요청인지🎜	Boolean🎜	false🎜🎜🎜🎜🎜【관련 학습 권장 사항: 🎜Mini 프로그램 개발 튜토리얼🎜】🎜

위 내용은 네이티브 미니 프로그램은 어떻게 요청을 캡슐화하고 인터페이스를 우아하게 호출할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!