Encapsular solicitud de subprograma [función de interfaz]

En este artículo de la API del Mini Programa basado en Promise , se menciona que las API asincrónicas proporcionadas oficialmente por el Mini Programa se implementan en función de las funciones de devolución de llamada. El uso extensivo de tales funciones de devolución de llamada causará el problema del infierno de devolución de llamada y la legibilidad del código. El rendimiento y la capacidad de mantenimiento deficientes se pueden resolver mediante Promising the Mini Program API, por lo que este artículo trata sobre cómo encapsular la solicitud de interfaz para la solicitud de datos de red de WeChat Mini Program.

Encapsular solicitud de solicitud de applet

Cree un archivo request.js en el directorio /utils para encapsular la solicitud del subprograma:

// 封装数据请求request
const BASE_URL = '';  // 基础地址

export default function request(url,params={}){
  return new Promise((resolve,reject)=>{
  wx.showLoading({  // 请求提示
    title: '正在加载中...',
  })
  wx.request({
    url: BASE_URL + url,  // 请求url地址
    data: params.data || {},  // 请求参数
    header: params.header || {},  // 请求头
    method: params.method || 'GET', // 请求方式
    dataType: 'json', // 返回数据类型
    success: (res)=> { // 成功调用
      wx.hideLoading(); // 关闭请求提示
      resolve(res.data) // 成功处理res.data中的数据
    },
    fail: (err)=> { // 失败调用
      wx.hideLoading(); // 关闭请求提示
      wx.showToast({  // 提示错误信息
        title: err || '请求错误！',
      })
      reject(err) // 失败处理err
    }
  })    
})
}

La encapsulación de la solicitud de datos de red de la solicitud no es tan complicada, y debería ser más fácil de entender con algunos comentarios.Antes de devolver una nueva Promesa (...), lo que se devuelve es un objeto Promesa, y luego se puede crear una nueva Promesa. datos, tiene dos parámetros, y los dos parámetros son funciones, es decir, funciones de orden superior, antes de la solicitud, use wx.showLoading para indicar que la solicitud se está cargando, inicie una solicitud de datos a través de wx.request, empalme con el la dirección base BASE_URL, y los datos de paso reciben los parámetros entrantes, el encabezado y el método son los mismos, se llama con éxito para cerrar el aviso de solicitud y se entrega para resolver para procesar el resultado exitoso, falla falla al llamar para cerrar el aviso de solicitud, y al mismo tiempo, debe solicitar al usuario que solicite información incorrecta y luego pasarla a rechazar para procesar el resultado de la falla;

¿Cómo llamar a la solicitud de solicitud encapsulada?

En primer lugar, preparemos la interfaz de prueba de la solicitud de datos. Aquí, la interfaz API proporcionada por el servidor equipado con el Node.js local se utiliza para la prueba:

La interfaz de prueba ha sido preparada, establezca la dirección base BASE_URL en http://127.0.0.1:3000;

const BASE_URL = 'http://127.0.0.1:3000'

Aquí debe configurar [Comprobar] [Detalles] - [No verificar el nombre de dominio legal...] en las herramientas de desarrollo del programa WeChat Mini;

Configure un botón en index.wxml:

<button bindtap="handleClick">request请求</button>

Introduzca el archivo de solicitud de datos de solicitud de encapsulación en index.js y escriba el evento de activación handleClcik del botón:

// index.js
const app = getApp()
import request from '../../utils/request'
Page({
    handleClick(){
        request('/api/navList').then(res=>{
            console.log(res);
        })
    }
})

Encapsular cada función de solicitud de interfaz de datos

Hay muchas solicitudes de datos de interfaz utilizadas en el proyecto. En este momento, estas funciones de interfaz están encapsuladas y se pueden importar y usar directamente cuando se usan;

Cree un archivo /util/api.js para encapsular la función de solicitud de cada interfaz:

// 引入封装request请求函数
import request from './request'
// 获取swiperList数据
export const reqSwiperList = () => request('/api/swiperList')
// 获取navList数据
export const reqNavList = () => request('/api/navList')
// 获取category数据
export const reqCategory = () => request('/api/category')

Lo siguiente se llama y se usa en onLoad en index.js:

...
 onLoad:function(){
    reqSwiperList().then(res=>{console.log('reqSwiperList',res)});
    reqNavList().then(res=>{console.log('reqNavList',res)});
    reqCategory().then(res=>{console.log('reqCategory',res)});
 }
...

asíncrono y espera

Usar async y await es más conciso que usar .then(res=>{}), hagamos un cambio en la función de solicitud en handleClick:

handleClick(){
    reqSwiperList().then(res=>{
        console.log(res);
    })
}

Use async y espere para escribir:

async handleClick(){
    const res = await reqSwiperList()
    console.log(res)
}

Lo anterior es el contenido de encapsular la solicitud de solicitud de datos del subprograma y encapsular la función de solicitud de datos de cada interfaz; se puede usar en su proyecto de subprograma, encapsular la solicitud de solicitud del subprograma y encapsular la solicitud de cada interfaz puede hacerle más en el proyecto applet Subir! ¡gracias por su apoyo! ! !