uniapp简单的接口封装 以及封装 loading 加载动画

标签：post   complete   @param   ase   ges   bsp   rms   自己   head   

引入的./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 加载动画

标签：post   complete   @param   ase   ges   bsp   rms   自己   head   

原文地址：https://www.cnblogs.com/jie98/p/14670381.html