uniapp 配置网络请求并使用请求轮播图

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

官方文档:@escook/request-miniprogram - npm (npmjs.com)

  • 1、安装 相应的包

uniapp 配置网络请求并使用请求轮播图_第1张图片

1、安装一个npm包管理文件:
npm init -y

2、安装我们这个网络请求第三方工具
npm i @escook/request-miniprogram

uniapp 配置网络请求并使用请求轮播图_第2张图片

  • 2、导入 $http 对象

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

uni.$http = $http

uniapp 配置网络请求并使用请求轮播图_第3张图片

  • 3、配置 请求根路径、请求拦截器

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

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

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

uniapp 配置网络请求并使用请求轮播图_第4张图片

  • 4、使用 网络请求

先在pages下建立需要的文件夹,再在这些文件夹上右键点击新建页面,创建就行 

uniapp 配置网络请求并使用请求轮播图_第5张图片





你可能感兴趣的:(uniapp,uni-app,vue,微信小程序)