Bagaimanakah program mini asli boleh merangkum permintaan dan antara muka panggilan dengan elegan?

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 // 相关请求的配置项,请求api等
│   ├── env.js // 环境配置
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...

Kod berkaitan

Fail konfigurasi

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,// 项目接口地址，支持多域名
}

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

// 引入状态码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
}

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

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()`链式调用
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
  }
}

nilai pilihan

参数	说明	数据类型	默认值
url	接口名	String	''
data	请求体	Object	{}
ignoreToken	请求是否携带token	Boolean	false
form	是否是表单请求	Boolean	false

[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!