uniApp数据请求封装

最新推荐文章于 2024-07-16 20:55:35 发布

zarek_jiamu

最新推荐文章于 2024-07-16 20:55:35 发布

阅读量656

点赞数

分类专栏： uniApp 文章标签： web app

本文链接：https://blog.csdn.net/zarek_jiamu/article/details/109966636

版权

uniApp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目的：减少非业务层代码编写，让编辑者更多地专注于业务代码的编写

/**********************************************httpClient.js**********************************************************************************/

import {
baseUrl
} from '../config';
/**

注：baseUrl微服务器api地址，数据服务后台跨域
* 获取存储token
*/
const getToken = () => {
   try {
       const value = uni.getStorageSync('token');
       return value ? value : '';
   } catch (e) {
       return '';
   }
}
/**
* 返回数据格式处理
* @param err 错误信息
* @param res 返回请求参数
*/

注：服务器外层实体为{code,message,t},可自行修改为你自己的外层实体(后端返回数据外层VO)
const farmData = (res, success, fail) => {
   if (!res) {
       uni.showToast({
           title: message,
           icon: 'none'
       })
       fail && fail(false, 404)
       return;
   }
   const {
       data: {
           code,
           message,
           t
       }
   } = res;
   if (code === 200) {
       success && success(t || true);
       return;
   }
   uni.showToast({
       title: message,
       icon: 'none'
   })
   fail && fail(false, code);
}
/**
* 发送请求
* @param {Sting} method 请求方法
* @param {Sting} serveRouter 后端服务路由
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
const sendRequest = (method, serveRouter, requestData, success, fail) => {
   uni.request({
       header: {
           'Content-Type': 'application/json;charset=utf-8',
           Authorization: getToken()
       },
       method,
       data: requestData,
       url: `${baseUrl}${serveRouter}`,
       success: res => (farmData(res, success, fail)),
       fail: res => (farmData(null, success, fail))
   })
}
/**
* httpPost数据请求
* @param {Sting} serveRouter 后端服务路由
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
export const httpPost = (serveRouter, requestData, success, fail) => (
   sendRequest('POST', serveRouter, requestData, success, fail))
/**
* httpGet数据请求
* @param {Sting} serveRouter 后端服务路由
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
export const httpGet = (serveRouter, requestData, success, fail) => (
   sendRequest('GET', serveRouter, requestData, success, fail));
/**
* httpPut数据请求
* @param {Sting} serveRouter 后端服务路由
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
export const httpPut = (serveRouter, requestData, success, fail) => (
   sendRequest('PUT', serveRouter, requestData, success, fail))
/**
* httpDelete数据请求
* @param {Sting} serveRouter 后端服务路由
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
export const httpDelete = (serveRouter, requestData, success, fail) => (
   sendRequest('delete', serveRouter, requestData, success, fail))
/**
* httpUpFile数据请求
* @param {Sting} serveRouter 后端服务路由
* @param {Sting} filePath 文件地址
* @param {Object} requestData 服务请求参数
* @param {Function} success 成功数据回调
* @param {Function} fail 失败数据回调
*/
export const httpUpFile = (serveRouter, filePath, requestData, success, fail) => {
   uni.uploadFile({
       url: serveRouter,
       filePath: filePath,
       name: 'file',
       formData: requestData,
       success: res => (farmData(res, success, fail)),
       fail: res => (farmData(null, success, fail))
   });
}

/********************************************main.js**************************************************************/

// 导入httpCliet工具

import {httpPost,httpGet, httpPut, httpDelete,httpPatch,httpUpFile} from './utl/httpClient'

// 追加至vue原型

Vue.prototype.httpPost = httpPost;
Vue.prototype.httpGet = httpGet;
Vue.prototype.httpPut = httpPut;
Vue.prototype.httpDelete = httpDelete;
Vue.prototype.httpPatch = httpPatch;
Vue.prototype.httpUpFile = httpUpFile;

/***************************************组件名.vue**********************************************************/

// httpPost调用

this.httpPost('login/loginWithPassword', {
phoneOrEmail: '18286181751',
password: 'zzr1234'

}, async ({token}) => {
const isSaveTrue = await this.localSave.save('token', token);

// httpGet调用
isSaveTrue&&this.httpGet('user',{id:'ad',name:'ad'},console.log)
});