Solicitação de rede e API de encapsulamento do miniprograma

Devido às limitações da plataforma, axios não é compatível com projetos de miniprogramas e as  wx.request() funções nativas da API são relativamente simples e não suportam funções de personalização global, como interceptores . Portanto, é recomendado usar pacotes de terceiros no projeto uni-app  @escook/request-miniprogram para iniciar solicitações de dados de rede

Documentação oficial: https://www.npmjs.com/package/@escook/request-miniprogram

Instalar
npm install @escook/request-miniprograma

Por fim, no  main.js arquivo de entrada do projeto, configure-o da seguinte forma:

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

Isso pode ser usado, simples depuração conjunta

Para facilitar a modificação e depuração conjunta da interface API no futuro, a API precisa ser encapsulada

Encapsular o miniprograma de solicitação é basicamente o mesmo que encapsular axios

API de encapsulamento

1. Crie o arquivo utils e depois crie baseUrl.js (o nome depende da sua preferência pessoal) 

import  {$http}  from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}
export default $http

2. Crie um arquivo API e, em seguida, crie home.js ( o nome depende de sua preferência pessoal )

import  http  from '../../utils/baseUrl.js'
export function swiperdata(data) {
  return http.get('/api/public/v1/home/swiperdata', data)
}

3. Finalmente chame o arquivo home.js

import { swiperdata } from '../../api/home/index.js'
methods: {
          // 3. 获取轮播图数据的方法
          async getSwiperList() {
            // 3.1 发起请求
            const { data: res } = await swiperdata()
            // 3.3 请求成功，为 data 中的数据赋值
            this.list = res.message
          },
        }

Terminar. . . .

Se você tiver alguma dúvida, pergunte e faça correções a qualquer momento!