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

在前面的项目中，总结后写了一个基于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);
		}
	}
};

const reloadPage = function() {
    
	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	let options = page.options || {
    };
	let route = page.route || '';
	if (route.indexOf('/') !== 0) {
    
		route = '/' + route;
	}
	let query = '';
	for (let k in options) {
    
		query = query + `${
      k}=${
      options[k]}&`;
	}
	uni.redirectTo({
    
		url: route + (query ? `?${
      query}` : ''),
	});
};

const alertError = function(error) {
    
	uni.showModal({
    
		title: '网络错误',
		content: '网络开了小差，请刷新重试下哦~',
		cancelText: '复制错误',
		confirmText: '刷新页面',
		success: (e) => {
    
			if (e.cancel) {
    
				let data = `code: ${
      error.code}, \r\nmsg: ${
      error.msg}, \r\ndetail: ` +
					(error.data ? (typeof error.data === 'string' ? error.data : JSON.stringify(error
						.data)) : null);
				uniCopy({
    
					data: data
				});
			}
			if (e.confirm) {
    
				reloadPage();
			}
		},
	});
};

const distinguishDataCode = function(response, loading) {
     //后台定义的状态码
	if (response.data) {
    
		let {
    
			msg,
			code,
		} = response.data;
		if (code == 200 || code == 201) {
    
			return Promise.resolve(response.data);
		} else if (code == 304) {
    
			uni.hideLoading();
			uni.stopPullDownRefresh();
			uni.showToast({
    
				title: msg,
				icon: 'none',
				duration: 4000,
			});
			return Promise.resolve(response.data);
		} else if (code == 411) {
     //token失效,登录信息失效
			try {
    
				uni.hideLoading();
				uni.stopPullDownRefresh();
				uni.clearStorageSync();
			} catch (e) {
    }
			uni.showToast({
    
				title: msg,
				icon: 'none',
				duration: 3000
			});
			$user.Silentlogin().then(res => {
     // 静默登录
				uni.switchTab({
    
					url: '/pages/pages/Home.vue'
				});
			}).catch(() => {
    
				uni.showToast({
    
					title: '登录失败，请重新进入小程序',
					icon: 'none',
					duration: 4000
				});
				return Promise.reject({
    
					code: 411,
					msg: '登录失败，请重新验证登录信息',
					data: response,
				});
			});
		} else {
    
			uni.hideLoading();
			uni.stopPullDownRefresh();
			alertError({
    
				code: code,
				msg: msg,
				data: response.data.error || (response.data.data || msg),
			});
			return Promise.reject(msg);
		}
	} else {
    
		uni.hideLoading();
		uni.stopPullDownRefresh();
		return Promise.reject({
    
			code: 200,
			msg: '数据不存在',
			data: response,
		});
	}
};



const distinguishStatusCode = function(response, loading) {
    
	let msg = {
    
		code: 500,
		msg: '服务器内部错误',
		data: response,
	};
	switch (response.statusCode) {
    
		case 200:
			return distinguishDataCode(response, loading);
		case 404:
			msg = {
    
				code: 404,
				msg: '资源获取不到',
				data: response,
			};
			break;
		case 500:
			msg = {
    
				code: 500,
				msg: '服务器内部错误',
				data: response,
			};
			break;
		case 503:
			msg = {
    
				code: 503,
				msg: '服务不可用',
				data: response,
			};
			break;
		case 504:
			msg = {
    
				code: 504,
				msg: '网关超时',
				data: response,
			};
			break;
		case 400:
			msg = {
    
				code: 400,
				msg: '服务器不理解请求的语法',
				data: response,
			};
			break;
		case 403:
			msg = {
    
				code: 403,
				msg: '服务器拒绝请求',
				data: response,
			};
			break;
		case 405:
			msg = {
    
				code: 405,
				msg: '方法禁用',
				data: response,
			};
			break;
		case 406:
			msg = {
    
				code: 406,
				msg: '无法使用请求的内容特性响应请求的网页',
				data: response,
			};
			break;
		case 407:
			msg = {
    
				code: 407,
				msg: '需要代理授权',
				data: response,
			};
			break;
		case 408:
			msg = {
    
				code: 408,
				msg: '请求超时',
				data: response,
			};
			break;
		case 409:
			msg = {
    
				code: 409,
				msg: '冲突',
				data: response,
			};
			break;
		case 410:
			msg = {
    
				code: 410,
				msg: '已删除',
				data: response,
			};
			break;
		case 411:
			msg = {
    
				code: 411,
				msg: '需要有效长度',
				data: response,
			};
			break;
		case 412:
			msg = {
    
				code: 412,
				msg: '服务器未满足请求者在请求中设置的其中一个前提条件',
				data: response,
			};
			break;
		case 413:
			msg = {
    
				code: 413,
				msg: '请求实体过大',
				data: response,
			};
			break;
		case 414:
			msg = {
    
				code: 414,
				msg: '求情URI过长',
				data: response,
			};
			break;
		case 415:
			msg = {
    
				code: 415,
				msg: '不支持的媒体类型',
				data: response,
			};
			break;
		case 416:
			msg = {
    
				code: 416,
				msg: '请求范围不符合要求',
				data: response,
			};
			break;
		case 417:
			msg = {
    
				code: 417,
				msg: '未满足期望值',
				data: response,
			};
			break;
		default:
			break;
	}
	uni.hideLoading();
	uni.stopPullDownRefresh();
	alertError(msg);
	return Promise.reject(msg);
};

const uniCopy = function({
     //复制错误
	data,
	success,
	error
}) {
    
	// #ifndef H5
	uni.setClipboardData({
    
		data: data,
		success() {
    
			success && success();
		}
	});
	// #endif
	// #ifdef H5
	if (!document.queryCommandSupported('copy')) {
     //为了兼容有些浏览器 queryCommandSupported 的判断
		// 不支持复制
	}
	let textarea = document.createElement('textarea');
	textarea.value = data;
	textarea.readOnly = 'readOnly';
	document.body.appendChild(textarea);
	textarea.select(); // 选择对象
	textarea.setSelectionRange(0, data.length); //核心
	let result = document.execCommand('copy'); // 执行浏览器复制命令
	if (result) {
    
		success && success();
	} else {
    }
	textarea.remove();
	// #endif
};

export default request;

在man.js中注册并且挂载到vue的原型链上

import Api from '@/request/appOnlaunch.js';
Vue.prototype.$api = Api; // 接口 路径

import Request from '@/request/request.js';
Vue.prototype.$request = Request; //请求

使用方式：

.then

getBanner() {
    
				this.$request({
    
					url: this.$api.home.banner,
					data: {
    
						type: 2
					},
					method: 'POST',
					loading: true,
				}).then(response => {
    
					console.log('请求到的数据', response);
				});
			},

async/await

async getBanner() {
     
				const e = await this.$request({
    
					url: this.$api.home.banner,
					data: {
    
						type: 2
					},
					method: 'POST'
				})
				let {
    
					status,
					data,
					msg,
				} = e;
				if (status != 200) console.log("状态码不为200")
				else {
    
					console.log("请求到的数据", data)
				}
			},

promises.all

const promises = [this.$api.mineday.craftsman, this.$api.mineday.serviceType].map((item, index) => {
    
					let data = {
    }
					if (index == 0) {
    
						data = {
    
							child_store_id: this.StoreDataList.id
						}
					}
					return this.$request({
    
						url: item,
						method: "GET",
						data: data
					})
				})
				Promise.all(promises).then(values => {
    
					console.log("请求到的数据集合", values)
				})

一个基于uni原生api（uni.request）封装的网络请求