uni-app如何配置网络请求及封装弹出提示框

uni-app如何配置网络请求

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

官方文档

1.下载

npm install @escook/request-miniprogram

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

3.页面调用接口

async getGoodsDetail(goods_id) {
    
    
	const {
    
    
		data: res
	} = await uni.$http.get('/api/public/v1/goods/detail', {
    
    
		goods_id
	})
	if (res.meta.status !== 200) return uni.$showMsg()
},

封装弹出提示框

main.js中

//封装弹框的方法
uni.$showMsg=function(title='数据请求失败!',duration=1500){
    
    
	uni.showToast({
    
    
		title,
		duration,
		icon:'none'
	})
	
}

页面调用

uni.$showMsg()