Cómo utilizar async-await y encapsular solicitudes asíncronas públicas *** en el desarrollo de mini programas
En el desarrollo diario de proyectos, definitivamente encontrará el problema de la ejecución sincrónica y asincrónica, y al ejecutar una operación, depende del resultado devuelto por la ejecución anterior. Entonces, ¿cómo resolverá este problema? esta vez?
1. Utilice settimeout para que se ejecute de forma asincrónica. Esto obviamente solo lo agrega a la cola de tareas asincrónicas para su ejecución, pero no hay garantía de que espere su regreso antes de ejecutar otra operación. . resultado.
2. ¿O desea encapsular su propia función de devolución de llamada? Eso conducirá al llamado infierno de devolución de llamada, donde el código se anida capa por capa y se entrelaza, lo que dificulta mantener incluso una lógica ligeramente compleja.
3. Por supuesto, la promesa en es6 resuelve muy bien este problema, y es aún más perfecto cuando se combina con async y await en es7. También se devuelve un objeto de promesa. No entraré en detalles sobre cómo usar await.
Plan de implementación
En primer lugar, el mini programa actualmente no admite async y await de es7, así que cómo hacer que lo admita
1. descargue
regenerador y coloque la carpeta runtime.js descargada en el directorio de utilidades de su propio subprograma. El paquete total es ****, que pesa 20 kb y el tamaño es muy pequeño.
2. Introduzca import regeneratorRuntime desde './.../utils/runtime.js' donde se necesitan ajustes
3 Cómo encapsular y usar
const postData = función asíncrona (url, datos) {
wx.showLoading({
título: 'Cargando',
})
let promesaP = esperar nueva Promesa(función(resolver, rechazar) {
wx.request({
url: baseUrl + url ,
datos: datos,
método: 'POST',
encabezado: {
'tipo de contenido ': 'aplicación/json',
'token de acceso': wx.getStorageSync('token')
},
éxito: función(res ) {
wx.hideLoading();
if (res.statusCode === 200) {
resolve(res)
} else {
rechazar(res.data)
}
},
falla: función(err) {
p>
wx.hideLoading();
rechazar(err)
if (err.code === 401) {}
}
})
})
devolver promesaP
}
módulo.exportaciones = {
postData
}
Uso:
importar regeneratorRuntime desde '.../.../utils/runtime.js ';
const app = getApp(),
postData = require('. /.. /service/koalaApi.js');
demostración asíncrona () {
await postData(app.globalData.baseUrl + '/test',{
datos: {}
}).luego((res ) = > {
console.log(res)
})
}
El siguiente es un paquete más completo, que incluye varios procesamiento y simplificación de juicios de error, y la flexibilidad de llamarlo pasando parámetros
//current host
const url_host = require('API.js').host
// Versión actual
const currentVersion = require('util.js').currentVersion
// currentPath
importar { currentPagePath } desde ' util.js'
//Llame al método de recuperación y encadene las transferencias en secuencia
// url, método, encabezado, datos, carga (si se muestra la carga)
función fetch(url, método, encabezado, datos, carga) {
// Aceptar Pasar pregunta indefinida al servidor
let fetchP = new Promise(function (resolver, rechazar) {
if (cargando) {
wx.showLoading( {
icono: 'cargando'
})
}
if(data && data.unionId && typeof data.unionId = = = "indefinido"){
wx.hideLoading()
return rechazar({
ok:false,
error: ' unionId -> ' + tipo de datos.unionId
});
}
wx.request({
url: url_host + url,
método: método método: 'GET',
encabezado: {
'tipo de contenido': 'aplicación/json ', // predeterminado
'versión': currentVersion,
'pagePath'. currentPagePath()
},
datos: datos,
éxito: función (res) {
if (res.statusCode < 500) {
resolver(res.data)data)
} más {
showError()
rechazar(res.data)
}
} ,
falla: función (err) {
showError()
rechazar(err)
},
completo: función (comp) {
if (cargando) {
wx.hideLoading()
}
}
})
})
return fetchP
}
// El servidor ha quedado obsoleto
p>función showError () {
wx.hideLoading()
// Obtener la ruta del archivo de encabezado
wx.navigateTo({
url: '/pages/serverError/serverError',
})
}
module.exports = {
fetch
}
Pensamientos
1. ¿Por qué debería introducirse regeneratorRuntime para usar async/await? ¿No es necesario usarlo con babel?
2.
¿Qué hace el generadorRuntime?
Resumen
1. Primero, comprenda qué hacen babel y polyfill respectivamente;
Babel es un transcodificador ampliamente utilizado. De forma predeterminada, solo hay una nueva sintaxis de JavaScript. API convertidas, no nuevas.
Por ejemplo, Iterator, Generator Set, Maps, Proxy, Reflect, Symbol, Promise y algunos métodos definidos en objetos globales (como Object.assign) no se traducirán.
Si desea utilizar estos nuevos objetos y métodos, debe utilizar babel-polyfill para proporcionar una corrección para el entorno actual.
2. Polyfill se utiliza para implementar código para API locales que no son compatibles con el navegador.
3. Después de comprender el significado anterior, también debe comprender que babel-polyfill es un cerebro que agrega todos los archivos js por usted. Ahora, cuando se ejecute, determinará qué archivos debe cargar allí. son opciones cargadas permanentemente sin contaminar variables globales. El regeneratorRuntime aquí eventualmente se convertirá en un generador es6 para su uso. Específicamente, puede ir al sitio web oficial de Babel e ingresar el código relevante para ver el código final convertido.