solicitud de red de configuración uniapp

1. Introducción 

 

Debido a la limitación de la plataforma, axios no es compatible con el proyecto de applet , y las  wx.request() funciones nativas de la API son relativamente simples, y las funciones de personalización global, como los interceptores, no son compatibles . Por lo tanto, se recomienda utilizar paquetes de terceros en el proyecto uni-app  @escook/request-miniprogram para iniciar solicitudes de datos de red.

Documentación oficial: @escook/request-miniprogram - npm

2. Pasos de configuración

1. Use la instalación de npm en el directorio raíz del proyecto

npm instalar @escook/request-miniprograma

@escookSi hay una carpeta  debajo de node_modules como se muestra en la figura , la instalación es exitosa

2. Configurar http en main.js

// 导入网络请求的包
import { $http } from '@escook/request-miniprogram'

uni.$http = $http

// 请求的根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net'

// 请求拦截器
$http.beforeRequest = function(options) {
  uni.showLoading({
    title: '数据加载中...'
  })
}

// 响应拦截器
$http.afterRequest = function() {
  uni.hideLoading()
}

3. Explicación detallada

De acuerdo con los requisitos de la interfaz, los tipos de solicitud más utilizados son solicitud de obtención y solicitud posterior.

res son los datos devueltos por la interfaz, que pueden incluir 1. Estado del resultado de la solicitud (éxito) 2. Datos (datos) 3. Solicitud (mensaje)

obtener solicitud uni.$http.get; publicar solicitud uni.$http.post

4. Ejemplos

Agregue el método para obtener el mapa de carrusel en home.vue

export default {
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
  },
  methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
  },
}

obtener ejemplo de devolución de solicitud

{
    "message": [
        {
            "image_src": "https://api-ugo-web.itheima.net/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/index?goods_id=129"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}