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)
}
...
})