uniapp 请求封装

新建一个request.js然后写入代码如下:

// 全局请求路径,也就是后端的请求基准路径
const BASE_URL = 'http://127.0.0.1:9908/'
// 同时发送异步代码的次数,防止一次点击中有多次请求,用于处理
let ajaxTimes = 0;
// 封装请求方法,并向外暴露该方法
export const request = (options) => {
	// 解构请求头参数
	let header = { ...options.header
	};
	// 当前请求不是登录时请求,在header中加上后端返回的token
	// if (options.url != 'login') {
	// 	header["client-identity"] = uni.getStorageSync('session_id');
	// }
	ajaxTimes++;
	// 显示加载中 效果
	uni.showLoading({
		title: "加载中",
		mask: true,
	});
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'POST',
			data: options.data || {},
			header,
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err)
			},
			// 完成之后关闭加载效果
			complete: () => {
				ajaxTimes--;
				console.log("时间",ajaxTimes)
				if (ajaxTimes === 0) {
					//  关闭正在等待的图标
					uni.hideLoading();
				}
			}
		})
	})
}

/**请求示例

  this.$request({
				url: '接口地址',
				method: '请求方式(默认POST)',
			}).then(res => {
				//请求正常返回
				console.log("优化封装", res.data);
			}).catch(err => {
				//请求失败返回
				console.log(err);
			});
//如:
  this.$request({
				url: 'data.json',
				method: 'GET',
			}).then(res => {
				console.log("优化封装", res.data);
			}).catch(err => {
				console.log(err);
			});
 * 
 * 
 * */

然后在main.js 进行全局挂载使用:

import {
	request
} from './common/request.js';
Vue.prototype.$request = request;

使用:

  this.$request({
				url: '接口地址',
				method: '请求方式(默认POST)',
			}).then(res => {
				//请求正常返回
				console.log("优化封装", res.data);
			}).catch(err => {
				//请求失败返回
				console.log(err);
			});


本文作者:admin

本文链接:https://www.javalc.com/post/56.html

版权声明:本篇文章于2021-03-01,由admin发表,转载请注明出处:分享你我。如有疑问,请联系我们

ApowerMirror 投屏商业授权版

发表评论

取消
扫码支持
登录
用户名
密码
注册
用户名
密码(至少8位)
确认密码
昵称
邮箱(请填写常用邮箱)
获取邀请码
邀请码
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱