标签：uniapp loading 封装 url request method baseSite data options

引入的./baseSite.js

let baseSite = ""

if(process.env.NODE_ENV === 'development'){
// 开发环境

//request.js文件
baseSite = 'ulr路径'
}else{
// 生产环境
baseSite = 'url路径'
}

export default baseSite

在api中封装

import baseSite from './baseSite.js'
// 同时发送异步代码的次数，防止一次点击中有多次请求，用于处理
// let ajaxTimes = 0;
module.exports = {
get: function(url, data, options = {}) {
return this.request({
url,
data,
method: 'GET',
...options
});
},
post: function(url, data, options = {}) {
return this.request({
url,
data,
method: 'POST',
...options
});
},
/**
* @Function
* @param {Object} options - 请求配置项
* @prop {String} options.url - 请求路径
* @prop {Object} options.data - 请求参数
* @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
* @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
* @prop {Object} [options.header = config.header] - 请求header
* @prop {Object} [options.method = config.method] - 请求方法
* @returns {Promise<unknown>}
*/
request: function(options = {}) {
// ajaxTimes++;
options.header = options.header || "application/x-www-form-urlencoded";
options.url = options.url || '';
options.data = options.data || {};
options.method = options.method || 'POST';
// 该方法里进行封装服务端接口需要的检验数据，以及一些常规的流程封装，如下（根据自己逻辑进行封装)
//options.data.token = 'xxxxx'
let headerObj = {
"content-type": options.header,
}
const token = uni.getStorageSync('token');
if (token) {
headerObj.token = token;
}
// 加载页面 动画
// uni.showLoading({
// title: "加载中",
// mask: true,
// });
return new Promise((resolve, reject) => {
uni.request({
url: baseSite + options.url,
data: options.data,
method: options.method,
header: headerObj,
success: function(result) {
let errorcode = result.data.errno
if (errorcode == 0) {
// resolve调用后，即可传递到调用方使用then或者async+await同步方式进行处理逻辑
resolve(result.data.data)
} else if (errorcode == 600) {
util.showToast('请登录帐号')
util.goLogin()
} else {
util.showToast(result.data.errmsg)
}
},
fail: function(e) {
console.log('error in...')
// reject调用后，即可传递到调用方使用catch或者async+await同步方式进行处理逻辑
reject(e)
},
// // 完成之后关闭加载效果
// complete: () => {
// ajaxTimes--;
// if (ajaxTimes === 0) {
// // 关闭正在等待的图标
// uni.hideLoading();
// }
// }
})
})
}
}

需要在全局中配置  引入request.js文件

在页面中使用

async request() {
let res = await this.$request.get('/index/index', {请求参数}).then(result => {
console.log(result)
return result
})

标签：uniapp,loading,封装,url,request,method,baseSite,data,options
来源： https://www.cnblogs.com/jie98/p/14670381.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。