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

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

青灯夜游
青灯夜游앞으로
2021-12-02 10:26:422960검색

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(&#39;./request&#39;)

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

统一分发接口

const orderApi = require("./order")

module.exports = {
  orderApi
}

页面引用

const { orderApi } = require(&#39;dir/path/api/index&#39;)
...
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제