Rumah > applet WeChat > Pembangunan program mini > Bagaimanakah program mini asli boleh merangkum permintaan dan antara muka panggilan dengan elegan?

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

青灯夜游
Lepaskan: 2021-12-02 10:26:42
ke hadapan
3016 orang telah melayarinya

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!

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

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 // 状态码
└── ...
Salin selepas log masuk

Kod berkaitan

Fail konfigurasi

env.js

// env.js
module.exports = {
  ENV: 'production',
  // ENV: 'test'
}
Salin selepas log masuk

statusCode.js

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

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

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
}
Salin selepas log masuk

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 // 状态码
└── ...
Salin selepas log masuk

Pengenalan permintaan

// 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 })
  }
}
Salin selepas log masuk

Antara muka pengedaran bersatu

const orderApi = require("./order")

module.exports = {
  orderApi
}
Salin selepas log masuk

Rujukan halaman

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
  }
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan