uni-app中统一调用接口服务

最新推荐文章于 2024-09-18 21:19:09 发布

H_Hao

最新推荐文章于 2024-09-18 21:19:09 发布

阅读量1.5w

点赞数

分类专栏：笔记学习

本文链接：https://blog.csdn.net/haoyuexihuai/article/details/86590587

版权

笔记同时被 2 个专栏收录

103 篇文章 0 订阅

订阅专栏

学习

33 篇文章 0 订阅

订阅专栏

基础调用使用Fly

1.request.js

uni-app自带Fly，通用模块

// 目前没有针对uni的Fly版本，使用wx版本没有问题
// #ifdef APP-PLUS
import Fly from 'flyio/dist/npm/wx'
// #endif
// #ifdef MP-WEIXIN
import Fly from 'flyio/dist/npm/wx'
// #endif


const request = new Fly()

const errorPrompt = (err) => {
	// #ifdef MP-WEIXIN
	wx.showToast({
		title: err.message || 'fetch data error.',
		icon: 'none'
	})
	// #endif
	// #ifdef APP-PLUS
	uni.showToast({
		title: err.message || 'fetch data error.',
		icon: 'none'
	})
	// #endif
}

request.interceptors.request.use((request) => {
	// wx.showNavigationBarLoading()
	uni.showLoading({
		title: '加载中'
	});
	return request
})

request.interceptors.response.use((response, promise) => {
	// wx.hideNavigationBarLoading()
	uni.hideLoading();
	// if (!(response && response.data && response.data.res === 0)) {
	//   errorPrompt(response)
	// }
	return promise.resolve(response.data)
}, (err, promise) => {
	// wx.hideNavigationBarLoading()
	uni.hideLoading();

	errorPrompt(err)
	return promise.reject(err)
})

export default request

2.store.js

写调用接口的方法，配置具体url，使用export导出方法

import request from 'common/request'
// import Fly from 'flyio/dist/npm/wx';
// var request = new Fly();


const getProducts = async function (page=1) {

	let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${page}&shop_id=682731`;
  
  console.log(url);
  
	const data = await request.get(url);
	if (data.has_more) {
		return data.shop_products;
	} else {
		return false;
	}
}


const search = async function(keywords, page=1) {

	console.log("keywords:" + keywords)
	//https://api.beidian.com/mroute.html?method=beidian.search.item.list&keyword=%E7%94%B5%E8%84%91&sort=hot&page_size=20&page=3
	keywords = encodeURI(keywords);
	let url =
		`https://api.beidian.com/mroute.html?method=beidian.search.item.list&keyword=${keywords}&sort=hot&page_size=20&page=${page}`;
    
	console.log(url);
	const data = await request.get(url);

	// console.log('data:' + JSON.stringify(data));
	// console.log(data.has_more)

	if (data.has_more) {
		return data.items;
	} else {
		console.log("没有数据了！")
		return false;
	}
}

// app/store应用的服务程序
module.exports= {
	getProducts,
  search,
}

3.页面调用

引入store.js，调用其中的getProducts方法

<script>
	import service from 'service/store.js';
	export default {
		data: {
            productList:[ ]
    },
		async onLoad() {
			// 调用方
			const productList = await service.getProducts(1);
            this.productList=productList;
			console.log(JSON.stringify(productList));
		}
	}
</script>