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; // 挂载全局