小程序的网络请求及封装api

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

安装
npm install @escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

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()
}

这样既可使用，简单的联调

为以后api接口方便修改和联调，需封装api

封装request-miniprogram和封装axios基本一样

封装api

1.创建创建 utils文件然后创建baseUrl.js （起名看个人爱好）

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.创建api文件然后创建home.js （起名看个人爱好）

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

3.最后调用文件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
          },
        }

结束。。。。

有问题欢迎提问，随时修改！

小程序的网络请求及封装api

猜你喜欢