uni-app项目之 请求的二次封装 （uni-app自带）

utils / app.js

// 对请求的 二次封装

const baseUrl = "http://localhost:9999";
export const myHttp = (options) => {
	return new Promise(( resolve, reject )=>{
		uni.request({
			url:baseUrl + 	options.url,
			method:options.method || 'GET',
			data: options.data || {},
			success:(res) => {
				if ( res.data.code !== 200 ) {
					uni.showToast({
						title:"获取数据失败"
					})
				}
				resolve(res.data);
			},
			fail:(err)=>{
				uni.showToast({
					title:"请求接口失败"
				})
				reject(err)
			}
		})
	})
}

// 请求示例
// 获取了轮播图数据 get请求 eg：
// async getSwiper(){
// 	const res = await this.$myHttp({
// 		url:"/swiper",
// 	})
// 	console.log("res",res);
// 	this.swiper = res.data;
// }

示例2：
// async getShopList(){
// 	const res = await this.$myHttp({
// 		url:"/shopList?pageIndex=" + this.pageIndex,
// 	})

挂载全局 main.js

import App from './App'
import { myHttp } from "./utils/app.js"

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false

Vue.prototype.$myHttp = myHttp; // 挂载全局

uni-app项目之 请求的二次封装 （第三方 推荐使用）

官网

下载 与 引入

npm install @escook/request-miniprogram

• main.js 之中引入

import App from './App'
// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

uni.$http = $http; // 挂载全局
$http.baseUrl = 'http://localhost:9999'
// 请求拦截
$http.beforeRequest = function (options) {
	// 可以 设置 请求头 
	 if (options.url.indexOf('/home/catitems') !== -1) {
	    options.header = {
	      'X-Test': 'AAA',
	    }
	  }
	uni.showLoading({
    title: '数据加载中...',
  })
}
// 响应拦截器
$http.afterRequest = function () {
  uni.hideLoading()
}


// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

使用 $http 发起请求

<template>
	<view class="home">
	<swiper class="swiper" circular indicator-dots="true" autoplay interval="2000" duration="500" >
		<swiper-item v-for="(item,idx) in swiper" :key="idx">
			<view class="swiper-item uni-bg-red">{{item.title}}</view>
		</swiper-item>
	</swiper>
	<view class="nav">
		<view class="nav_item" v-for="item in navList" @click="navItem(item.path)">
			{{ item.title }}
		</view>
	</view>
	<view class="recommend">
		<view class="recommend_title">
			推荐商品
		</view>
		<view class="recommend_list">
			<view class="recommend_list_item" v-for="item in shopList">
				{{ item.title}}
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper:[],
				navList:[
					{
						title:"超市",
						path:"/pages/goods/goods"
					},
					{
						title:"联系",
						path:"/pages/contact/contact"
					},
					{
						title:"图片",
						path:"/pages/pics/pics"
					},
					{
						title:"学习",
						path:"/pages/learn/learn"
					},
				],
				shopList:[],
				pageIndex:1,
			}
		},
		onLoad() {
			this.getSwiper();
			this.getShopList();
		},
		methods: {
			// 获取了轮播图数据
			async getSwiper(){
				const res =await uni.$http.get("/swiper")
				console.log("res2",res);
				this.swiper = res.data;
			},
			// 获取商品列表
			async getShopList(){
				const { data } = await uni.$http.get("/shopList?pageIndex=" + this.pageIndex)
				console.log("resres",data);
				this.shopList = data.data;
			},
			navItem(url){
				console.log("url",url);
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>