侧边栏壁纸
博主头像
分享你我博主等级

行动起来,活在当下

  • 累计撰写 107 篇文章
  • 累计创建 13 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

uniapp 请求封装

管理员
2021-03-01 / 0 评论 / 0 点赞 / 3 阅读 / 2273 字

新建一个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);
});


0

评论区