Bagaimana untuk menjadikan sokongan applet WeChat tidak segerak menanti?

Aplet WeChat menggunakan async menanti

Applet WeChat tidak menyokong async, dan terlalu tidak selesa untuk menulis kod
Pelbagai panggilan balik akan menyebabkan masalah panggilan balik, fungsi panggil balik Masalahnya mengira lapisan dalam lapisan menjadikan kod sukar dibaca dan sukar untuk dikekalkan pada masa hadapan

Penyelesaian:

Gunakanregenerator-runtime

regenerator-runtime ialah modul penjana semula Facebook
Selepas fungsi penjana, async, dan fungsi menunggu disusun oleh babel, modul penjana semula-masa jalan digunakan untuk menyediakan pelaksanaan fungsi.

Perkenalkan packages/regenerator-runtime/runtime.js dalam facebook/regenerator

Langkah 1 Import dan daftar

Oleh kerana ia digunakan secara global, semuanya dalam app.js Diperkenalkan dalam dan didaftarkan dalam objek global. . Gunakan async await

seperti: app.js

import regeneratorRuntime from './lib/runtime'

App({
    ...

    regeneratorRuntime,

    onLaunch(){},

    onShow() {},

    onHide() {},

    ...
})

API asli program mini menggunakan async await

Anda tidak perlu lagi menulis pelbagai kejayaan, gagal dan panggilan balik yang lain. Kod ini lebih jelas.

request.jsLangkah 1 Kemaskan api asli menggunakan Promise

const METHOD = {
    GET: 'GET',
    POST: 'POST',
    PUT: 'PUT',
    DELETE: 'DELETE'
}

let baseUrl = ''
const interceptors = []

class Request {
    /**
     * response interceptor
     */
    intercept(res, resolve, reject) {
        return interceptors
            .filter((f) => typeof f === 'function')
            .every((f) => f(res, resolve, reject))
    }

    /**
     * request
     */
    request(option) {
        const header = {
            'content-type': 'application/x-www-form-urlencoded'
        }
        const { url, method, data = {} } = option

        return new Promise((resolve, reject) => {
            try {
                wx.request({
                    url: baseUrl + url,
                    method: method || METHOD.GET,
                    data,
                    header,
                    success: (res) => this.intercept(res, resolve, reject),
                    fail: (err) => {
                        if (
                            err &&
                            err.errMsg &&
                            err.errMsg.indexOf('request:fail') !== -1
                        ) {
                            console.error('wx request error: ', err)
                        } else {
                            wx.showToast({
                                title: JSON.stringify(err),
                                icon: 'none',
                                duration: 10000
                            })
                        }
                    }
                })
            } catch (err) {
                wx.showToast({ title: err.message, icon: 'none' })
            }
        })
    }

    get(url, data) {
        return this.request({ url, method: METHOD.GET, data })
    }

    post(url, data) {
        return this.request({ url, method: METHOD.POST, data })
    }

    put(url, data) {
        return this.request({ url, method: METHOD.PUT, data })
    }

    delete(url, data) {
        return this.request({ url, method: METHOD.DELETE, data })
    }

    all(tasks) {
        return Promise.all(tasks)
    }
}

/**
 * 设置base URL
 */
function setBaseUrl(url) {
    baseUrl = url
}

/**
 * 默认response拦截器
 */
function addDefaultInterceptor() {
    interceptors.push((res, resolve, reject) => {
        const status = res.statusCode
        if (status !== 200) {
            return reject(new Error(`internet error: ${status}`))
        }
        const body = res.data
        if (body.errno !== 0) {
            return reject({
                message: body.error,
                body
            })
        }
        return resolve(body.data)
    })
}

const request = new Request()

export { setBaseUrl, addDefaultInterceptor, request }

wxp.js

import { request, setBaseUrl, addDefaultInterceptor } from './lib/request'

addDefaultInterceptor()

App({
    ...

    async onLaunch() {
        const userInfo = await request.get('/user/info')
        console.log(userInfo)
    }

    ...
})

Langkah 2 Gunakan

Cadangan pembelajaran berkaitan:

Tutorial Pembangunan Program Mini

Atas ialah kandungan terperinci Bagaimana untuk menjadikan sokongan applet WeChat tidak segerak menanti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!