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