Bagaimanakah applet WeChat merangkum permintaan asli? Bagaimana untuk memanggil antara muka? Artikel berikut akan memperkenalkan anda kepada kaedah merangkum permintaan dalam applet WeChat asli dan antara muka panggilan yang elegan. Saya harap ia akan membantu anda!

Artikel ini ialah coretan kod, yang merangkumi permintaan applet WeChat asli. Saya mempunyai tabiat menulis peribadi, hanya untuk rujukan.

Merangkum permintaan gaya Promise berdasarkan Permintaan asli program mini
Elakkan panggilan balik berbilang peringkat (neraka panggilan balik)
Pemprosesan dan pengedaran ralat permintaan rangkaian bersepadu

Struktur direktori

.
├── api
│   ├── config.js // 相關(guān)請(qǐng)求的配置項(xiàng),請(qǐng)求api等
│   ├── env.js // 環(huán)境配置
│   ├── request.js  // 封裝主函數(shù)
│   ├── statusCode.js // 狀態(tài)碼
└── ...

Kod berkaitan

Fail konfigurasi

env.js

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

statusCode.js

// statusCode.js
// 配置一些常見(jiàn)的請(qǐng)求狀態(tài)碼
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,// 項(xiàng)目接口地址，支持多域名
}

Fungsi utama

Nota Baris 64~68 ialah pemprosesan tamat tempoh token Apabila memanggil log masuk, semak sama ada token wujud dalam app.globalData Jika ia wujud, tiada permintaan log masuk akan dimulakan Jika token tamat tempoh, maka permintaan log masuk akan dimulakan semula pada permintaan seterusnya. Ini akan memperoleh semula token baharu

// 引入狀態(tài)碼statusCode
const statusCode = require('./statusCode')
// 定義請(qǐng)求路徑, BASEURL: 普通請(qǐng)求API; CBASEURL: 中臺(tái)API,不使用中臺(tái)可不引入CBASEURL
const { BASEURL } = require('./config')
// 定義默認(rèn)參數(shù)
const defaultOptions = {
  data: {},
  ignoreToken: false,
  form: false,
}
/**
 * 發(fā)送請(qǐng)求
 * @params
 * method: <String> 請(qǐng)求方式: POST/GET
 * url: <String> 請(qǐng)求路徑
 * data: <Object> 請(qǐng)求參數(shù)
 * ignoreToken: <Boolean> 是否忽略token驗(yàn)證
 * form: <Boolean> 是否使用formData請(qǐng)求
 */
function request (options) {
  let _options = Object.assign(defaultOptions, options)
  let { method, url, data, ignoreToken, form } = _options
  const app = getApp()
  // 設(shè)置請(qǐng)求頭
  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; //自定義請(qǐng)求頭信息
    }
  }
  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) {
            // 統(tǒng)一處理請(qǐng)求錯(cuò)誤
            showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
          resolve(res.data)
        } else if (code === statusCode.EXPIRE) {
          app.globalData.token = &#39;&#39;
          showToast(`登錄過(guò)期, 請(qǐng)重新刷新頁(yè)面`)
          reject(res.data)
        } else {
          showToast(`請(qǐng)求錯(cuò)誤${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函數(shù)
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
}

Penggunaan

Buat fail baharu

Cipta fail api (ambil antara muka pesanan sebagai contoh di sini) , buat api/index.js baharu (pemprosesan bersepadu pengedaran antara muka untuk mengelakkan antara muka daripada ditulis dalam fail yang sama terlalu bertele-tele)
Struktur direktori ialah seperti berikut:

.
├── api
│   ├── config.js // 相關(guān)請(qǐng)求的配置項(xiàng),請(qǐng)求api等
│   ├── index.js  // 統(tǒng)一處理入口
│   ├── order.js  // 訂單接口
│   ├── request.js  // 封裝主函數(shù)
│   ├── statusCode.js // 狀態(tài)碼
└── ...

Pengenalan permintaan

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

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

Antara muka pengedaran bersatu

const orderApi = require("./order")

module.exports = {
  orderApi
}

Rujukan halaman

const { orderApi } = require('dir/path/api/index')
...
1. `Promise.then()`鏈?zhǔn)秸{(diào)用
func () {
  orderApi.apiName(params).then(res => {
    // do Something
  }).catch(err => {
    // do Something
  })
}

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

nilai pilihan

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini】

Atas ialah kandungan terperinci Bagaimanakah program mini asli boleh merangkum permintaan dan antara muka panggilan dengan elegan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!