wepy plugin axios

complemento-wepy-axios

En primer lugar, gracias a los autores de axios y wepy por proporcionar bibliotecas tan excelentes.

Este es un complemento wepy que le permite usar axios en programas pequeños

documentación de axios | documentación wepy

Al crear un miniprograma, las funciones de la función wx.request integrada en el miniprograma estaban muy limitadas. Incluso wepy.request es solo una simple encapsulación de la función original y no puede proporcionar funciones avanzadas como axios. permite utilizar la mayoría de las funciones de axios en programas pequeños.

Si bien mantiene la API lo más cercana posible a la API original de axios, este complemento encapsula wx.request , wx.uploadFile y wx.downloadFile . También proporciona una función de cola de solicitudes, lo que eleva el límite de envío de hasta 5 solicitudes. al mismo tiempo.

Si te gusta, dale una estrella y apóyalo. ¿Los problemas y las relaciones públicas son bienvenidos?

Instalar

Utilice npm o hilo para instalar axios y wepy-plugin-axios al mismo tiempo

 npm instala axios wepy-plugin-axios --save
hilo agregar axios wepy-plugin-axios

Configuración

Nota: Este complemento debe usarse con wepy . Los siguientes ejemplos usan la última versión de wepy. Si no sabe cómo usar wepy o axios, lea primero su documentación respectiva.

1. Configurar wepy

   Agregue el elemento axios a plugins de wepy.config.js . El complemento no tiene opciones, solo use un objeto vacío como opción.

    módulo.exportaciones = {
   // ...otros complementos de configuración: {// ...otros complementos axios: {}
   }}

   Nota: Si está utilizando la configuración predeterminada generada por wepy, encontrará el siguiente código al final del archivo:

    módulo.exportaciones.plugin = {
   uglifyjs: {//...
   },
   imagenmin: {//...
   }}

   Aquí también debe insertar una línea de axios: {} ; de lo contrario, se producirá un error al generar la versión de lanzamiento.

2. Configurar ejes

   Introduzca una función para generar un adaptador desde wepy-plugin-axios/dist/adapter y luego pase una instancia de axios a esta función para obtener un adaptador.

   Utilice axios.defaults o axios.create para configurar adapter de axios (se recomienda este último)

    importar axios desde 'axios' importar wepyAxiosAdapter desde 'wepy-plugin-axios/dist/adapter'// La inicialización del adaptador debe ejecutarse antes que cualquier otro axios.create const adaptor = wepyAxiosAdapter(axios)export default axios.create({
   adaptador: adaptador // Esta propiedad es la clave para usar axios en un mini programa // ...Otras propiedades})

uso

El siguiente ejemplo supone que la configuración se ha completado de acuerdo con el contenido anterior.

Enviar una solicitud normal

 //Enviar una solicitud GET normal axios.get('https://huajingkun.com/api/userinfo')//Enviar datos json axios.request({
método: 'publicar',
URL: 'https://huajingkun.com/api/userinfo',
datos: {apodo: '233'
}})//Enviar datos codificados en URL axios.post('https://huajingkun.com/api/userinfo', {nick: '233' }, {
encabezados: {'tipo de contenido': 'aplicación/x-www-form-urlencoded'
}})

Subir archivos

Si el campo $upload aparece en los datos de la solicitud POST, esta solicitud se considera una solicitud de carga de archivo.

 axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // Resultados de interfaces como wx.chooseImage },
// ...otros datos enviados juntos})

Descargar archivo

Si responseType es file en una solicitud GET, esta solicitud se considera una solicitud de descarga de archivo. Se devuelve la ruta temporal del archivo (consulte la documentación de desarrollo del miniprograma para obtener más detalles).

Nota: el protocolo http solo se puede utilizar en este momento

 axios.get('http://www.baidu.com', {tipo de respuesta: 'archivo' }).entonces(respuesta => {
console.log(response.data) // Muestra la ruta temporal del archivo descargado correctamente})

Opciones de solicitud

Este complemento brinda soporte para la mayoría de las opciones de axios y también realiza algunas modificaciones basadas en la API de axios original:

Opciones no admitidas

Nota: Debido a la función de solicitud limitada del miniprograma, las siguientes opciones no son compatibles. Si las siguientes opciones aparecen durante el uso, se ignorarán. Se podrán utilizar las funciones que no estén en esta lista.

• timeout

• withCredentials

• auth

• xsrfCookieName

• xsrfHeaderName

• onUploadProgress

• onDownloadProgress

• maxContentLength

• maxRedirects

• httpAgent

• httpsAgent

• proxy

Opciones limitadas

• url : Se debe especificar el protocolo y solo puede ser http o https. Solo la descarga de archivos puede usar http.

• method : solo puede ser un método compatible con el miniprograma (consulte la documentación de desarrollo del miniprograma para obtener más detalles)

• responseType : solo puede ser uno de json , text y file

Devolver contenido

El contenido devuelto es similar al contenido devuelto de axios:

 {
// Datos de respuesta enviados por el servidor // Para solicitudes de descarga de archivos, el contenido del campo de datos es la ruta temporal de los datos del archivo: cadena de objeto |

// Estado del código de respuesta HTTP: número,

// Encabezados HTTP devueltos por el servidor. Todos los nombres de los encabezados están en minúsculas // Para solicitudes de carga o descarga, el campo de encabezados siempre es un objeto vacío (el subprograma no proporciona el contenido del encabezado devuelto)
encabezados: objeto,

// Opciones de solicitud utilizadas por la configuración de axios: objeto,

// Pasa el contenido específico de la solicitud wx.request o wx.uploadFile o wx.downloadFile: objeto}

Aviso

Dado que el sistema de complementos actual de wepy no es lo suficientemente perfecto, este complemento utiliza un método relativamente "sucio" para permitir el uso de axios en wepy:

Modifique directamente el archivo fuente de axios

La definición de adaptadores en el archivo fuente de axios lib/defaults.js se eliminó en lib/plugin.js . Dado que axios admite navegadores y Node.js, wepy no puede ignorar el módulo nativo de Node.js al empaquetar. provocar que el embalaje falle.

Sin embargo, actualmente el complemento wepy solo puede modificar el archivo fuente en el último paso del empaquetado y no puede modificar la información de dependencia. Por lo tanto, el código preparado para Node.js no se puede ignorar, por lo que solo se puede eliminar de forma grosera. Por cierto, el código roto por el navegador también lo eliminé, porque XMLHttpRequest no se puede usar en mini programas y se debe usar un adaptador personalizado. Después de la eliminación, el tamaño del archivo también se puede reducir.

Esta modificación significa que si el código de su subprograma comparte una carpeta node_modules con otro código, otro código no podrá usar axios normalmente.

Desarrollo y prueba de complementos

Dado que wepy actualmente no tiene una función de alias, solo puede copiar toda la carpeta del proyecto a la carpeta node_modules del proyecto de prueba durante el desarrollo y cambiar wepy-plugin-axios/dist/adapter a wepy-plugin-axios/lib/adapter.js

Ejecute el siguiente comando durante la compilación para obtener el archivo final en la carpeta dist :

 compilación de ejecución npm

licencia

MIT