封装uni网络请求（uni.request）

最新推荐文章于 2024-07-16 20:55:35 发布

周周池

最新推荐文章于 2024-07-16 20:55:35 发布

阅读量1.9k

点赞数

分类专栏：集中管理api 文章标签： javascript 前端 request uni-app 微信小程序

本文链接：https://blog.csdn.net/weixin_45444562/article/details/123204273

版权

本文记录了在项目中对uni.request的封装过程，包括api的集中管理、域名拼接、封装uni.request方法以及在Vue原型链上的注册与使用，旨在提高网络请求的便捷性和可维护性。

摘要由CSDN通过智能技术生成

在前面的项目中，总结后写了一个基于uni的api(uni.request)封装的网络请求，比较好用，做个笔记

api集中管理，利于查看和维护

apiUrl/apiUrl.js

// API   请勿修改
const apiUrl = {
   
	home: {
   
		xxxxxx: 'xxxxxx/xxxxxx/xxxxxx', //获取店铺列表
	},
	Collage: {
   }
};

export default apiUrl;

拼接域名

request/appOnlaunch.js

import apiUrl from '../ApiUrl/apiUrl.js';
import {
   
	appUrl
} from '@/config/config.js';     //导入域名前缀

let siteInfo = {
   
	'version': '1.0.0',
	'apiroot': appUrl,
};

const spliceUrl = (ip, apiUrl) => {
   
	let newUrl = {
   };
	for (let k in apiUrl) {
   
		let newOb = {
   
			[k]: {
   }
		};
		for (let i in apiUrl[k]) {
   
			newOb[k][i] = `${
     ip}${
     apiUrl[k][i]}`;
		}
		newUrl[k] = newOb[k];
	}
	return newUrl;
};

export default spliceUrl(siteInfo.apiroot, apiUrl);

封装uni.request()

import $store from '../store/index.js';
import $user from '../common/user.js';
import {
   
	token
} from '@/config/AppParameter.js';

const request = async function(args) {
   
	if (args.loading) uni.showLoading({
   
		title: '加载中',
		mask: true
	});
	const headre = {
   
		'content-Type': 'application/json',
		'token': $store.getters['user/ReturnAccessToken'] || uni.getStorageSync(token) || ''
	};
	const [error, response] = await uni.request({
   
		url: args.url,
		method: args.method || 'Get',
		data: args.data,
		header: headre
	});
	if (error) {
   
		let msg = {
   
			code: 400,
			msg: error.errMsg,
			data: error
		};
		if (args.loading) {
   
			uni.hideLoading();
			uni.stopPullDownRefresh();
		}
		alertError(msg);
		return Promise.reject(msg);
	} else {
   
		if (args.loading) {
   
			return distinguishStatusCode(response, args.loading);
		} else {
   
			return distinguishStatusCode(response);
		}
	}
}