uniapp封装接口

uniappapi二次封装请求接口

举个栗子 .

5779人浏览 · 2022-11-12 09:23:44

举个栗子 . · 2022-11-12 09:23:44 发布

开发uniapp时需要封装接口,把下面三个js创建好文件夹扔进去就行了,然后需要再main.js中全局引用一下

import App from './App'
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui';
import api from "network/api.js"
import base from '@/network/baseUrl.js'
import rule from '@/network/rule.js'
// import store from './store';

Vue.use(uView);
Vue.prototype.$rqt = api;
Vue.prototype.$base = base;
Vue.prototype.$rule = rule;

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
  // store,
    ...App
})
app.$mount()

//network/request.js文件

import base from './baseUrl.js'

export default class Request {
  http(param) {
    // 请求参数
    let url = param.url;
    let method = param.method;
    let header = param.header || {};
    let data = Object.assign(param.data || {});
    let hideLoading = param.hideLoading || false;
    let whetherData = param.whetherData;
    //拼接完整请求地址
    let requestUrl = base.baseUrl + url;

    //请求方式:GET或POST(POST需配置
    // header: {'content-type' : "application/x-www-form-urlencoded"},)
    if (method) {
      method = method.toUpperCase(); //小写改为大写
      if (method == "POST") {
        header = Object.assign({
          'content-type': "application/x-www-form-urlencoded"
          // 'content-type': "application/json"
        }, param.header, {
          Token: uni.getStorageSync("token")
        })
      } else {
        header = Object.assign({
          'content-type': "application/json"
        }, param.header, {
          Token: uni.getStorageSync("token")
        })
      }
    }
    //加载圈
    if (!hideLoading) {
      uni.showLoading({})
    }
    // 返回promise
    return new Promise((resolve, reject) => {
      // 请求
      uni.request({
        url: requestUrl,
        data: data,
        method: method,
        header: header,
        success: (res) => {
          // console.log('拦截器',res);
          //隐藏加载
          if (!hideLoading) {
            uni.hideLoading();
          }
          // 判断 请求是否成功 
          if (res.statusCode == 200) {
            //判断  接口返回列表中是否存在 data 列表 （因为接口不统一所以从这里判断 promise返回什么数据）
            if (whetherData) {
              // code判断:1成功,不等于1错误
              if (res.data.code == 1) {
                //成功            
                resolve(res.data)
                return true;
              } else {
                if (res.data.code == 2||res.data.code==10015) {
                  uni.removeStorageSync("token")
                  // #ifndef MP-WEIXIN
                  uni.navigateTo({
                    url: '/pages/login/login'
                  })
                  // #endif
                  // #ifdef MP-WEIXIN
                  // toast('请前往登录')
                  uni.switchTab({
                    url:'/pages/login/login'
                  })
                  // #endif
                }
                // console.log("错误", res.data);
                uni.showToast({
                  title:res.data.msg,
                  icon:'none'
                })
                return false;
              }
            } else {
              console.log('不判断', res.data);
              resolve(res.data)
              return true;
            }
          } else {
            return false;
          }
        },
        //请求失败
        fail: (err) => {
          console.log('请求失败', err);
          //隐藏加载
          if (!hideLoading) {
            uni.hideLoading();
          }
          return false;
        },
        //请求完成
        complete() {
          return;
        }
      })
    })
  }
}

//network/api.js文件

import Request from './request.js'
let request = new Request().http
/*
 * 请求样式：
    自定义名字: function(data) {
        return request({
            url: "/banner", //请求头
            method: "GET", //请求方式 
            data: data,    //请求数据
            whetherData: true,  //是否数据格式规范接口
            hideLoading: false, //加载样式
        })
    }, 
 */
function get(url, data, whetherData = true, hideLoading, header) {
  return request({
    url: url,
    method: 'GET',
    data: data,
    header: header,
    whetherData: whetherData
  })
}

function post(url, data, whetherData = true, hideLoading, header) {
  return request({
    url: url,
    method: 'POST',
    data: data,
    header: header,
    whetherData: whetherData,
    hideLoading: hideLoading,
  })
}

let api = {
  /*
   *  ================版本号=================
   */
  mine_getVersion: data => post('app/version', data, false, true),
  // /*
  //  *  ================登录=================
  //  */
  // // 微信授权
  // wxLogin_auth: data => post('wxLogin/auth', data, false, true),
  // // 微信登录
  // wxLogin_login: data => post('wxLogin/login', data, false, true),
  // // 微信获取手机号
  // wxLogin_getPhoneNumber: data => post('wxLogin/getPhoneNumber', data, true, true),
  // // 微信绑定手机号
  // wxLogin_binding: data => post('wxLogin/binding', data, true, true),
  // // 微信设置初始密码
  // wxLogin_setPasswd: data => post('wxLogin/setPasswd', data, true, true),
  // // app登录
  login_login: data => post('user/login', data, true, true),
  
  // // app注册
  // login_regist: data => post('login/regist', data, true, true),
  // /*
  //  *  ================我的=================
  //  */
  // 我的
  info:data=>post('user/info',data,true,true),
  // // 用户信息
  mine_mine: data => post('mine/mine', data, true, true),
  // 绩效
  person_performance: data => post('mine/performance',data,true,true),
  // 我的订单
  my_order: data => post('order/order',data,true,true),
  // 服务项目
  serve_item:data=> post('goods/goodsDetail',data,true,true),
  // 绑定油枪
  sweepCode:data=>post('oil/bind',data,true,true),
  // 流水-支付
  go_pay:data=>post('oil/posPay',data,true,true),
  // 流水-打标签
  make_tag:data=>post('oil/tagged',data,true,true),
  // 加油枪一枪到底
  oli_recal:data=>post('oil/recal',data,true,true),
  // 打卡
  punch_card:data=>post('user/clock',data,true,true),
  // 预付款记录
  customerList:data=>post('oil/customerList',data,true,true),
  // 打卡油站列表
  oli_list:data=>post('user/gasList',data,true,true),
  // 打卡记录
  clockLog:data=>post('user/clockLog',data,true,true),
  // 历史加油记录
  history_oli:data=>post("oil/history",data,true,true),
  // 今日加油记录
  onday_oli:data=>post('oil/currentFlow',data,true,true),
  // 扫加油枪
  sweepCode:data=>post('oil/bind',data,true,true),
  // 支付获取价格
  pay_onli:data=>post('oil/recal',data,true,true),
  // 流水-标签记录
  tagLog:data=>post('oil/tagLog',data,true,true),
  // 删除标签
  delete_tag:data=>post('oil/delLog',data,true,true),
  // 修改标签
  amend:data=>post('oil/editLog',data,true,true),
  // 兑换商品 查询商品
  query_goods:data=>post('change/query',data,true,true),
  // 兑换商品-提交订单
  submitOrder: data => post('change/submitOrder', data, true, true, Object.assign({
    'content-type': "application/json"
  })),
  // 获取验证码
  sendCode:data=>post('change/sendCode',data,true,true),
  // 获取二维码
  getQrCode:data=>post('oil/getQrCode',data,true,true),
  // 刷新订单
  synUpdate:data=>post('change/syncUpdate',data,true,true),
  // 请求保险柜列表
  safeBox:data=>post('user/safeBox',data,true,true),
  // 新增保险柜
  addBox:data=>post('user/insertSafe',data,true,true),
  // 编辑保险柜
  editBox:data=>post('user/editSafe',data,true,true),
  // 删除保险柜
  deleteBox:data=>post('user/delSafe',data,true,true)
  // // 充值
  // recharge_recharge: data => post('recharge/recharge', data, true, true),
  // // 二维码
  // index_getQRCode: data => post('index/getQRCode', data, true, true),
  // // 我的团队
  // index_myTeam: data => post('index/myTeam', data, true, true),
  // // 实名认证
  // index_verify: data => post('index/verify', data, true, true),
  // // 修改密码
  // mine_changePassword: data => post('mine/changePassword', data, true, true),
  // // 线下店铺
  // shop_offLine: data => post('shop/offLine', data, true, true),
  // // 客服(app)
  // mine_kefu: data => post('mine/kefu', data, true, true),
  // // 余额记录
  // mine_bill: data => post('mine/bill', data, true, true),
  // // 提货券记录
  // mine_points: data => post('mine/points', data, true, true),
  // /*
  //  *  ================首页=================
  //  */
  // // 轮播自营
  // index_index: data => post('index/index', data, true, true),
  // // 自营商品列表
  // goods_selfGoods: data => post('goods/selfGoods', data, true, true),
  // // 返利商品列表
  // goods_backGoods: data => post('goods/backGoods', data, true, true),
  // // 商品详情
  // goods_goodsDetail: data => post('goods/goodsDetail', data, true, true),
  // // 加入购物车
 
  // // 折扣专区
  // rebate_rebateList: data => post('rebate/rebateList', data, true, true),
  // // 折扣商品详情
  // rebate_getOne: data => post('rebate/getOne', data, true, true),
  // // 拼团专区
  // group_getList: data => post('group/getList', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 拼团详情
  // group_groupDetail: data => post('group/groupDetail', data, true, true),
  // // 秒杀专区
  // spike_spikeList: data => post('spike/spikeList', data, true, true),
  // // 秒杀详情
  // spike_spikeDetail: data => post('spike/spikeDetail', data, true, true),
  // /*
  //  *  ================分类=================
  //  */
  // // 一级分类
  // goods_firstGoodsClass: data => post('goods/firstGoodsClass', data, true, true),
  // // 二级分类
  // goods_secondGoodsClass: data => post('goods/secondGoodsClass', data, true, true),
  // // 根据分类返利商品列表
  // goods_goodsList: data => post('goods/goodsList', data, true, true),
  // /*
  //  *  ================店铺=================
  //  */
  // // 店铺列表
  // shop_getList: data => post('shop/getList', data, true, true),
  // // 店铺详情
  // goods_shopGoodsList: data => post('goods/shopGoodsList', data, true, true),

  // /*
  //  *  ================收货地址=================
  //  */
  // // 地址列表
  // userAddress_myAddress: data => post('userAddress/myAddress ', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 新增编辑地址
  // userAddress_insertOrUpdate: data => post('userAddress/insertOrUpdate ', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 删除地址
  // userAddress_deleteAddress: data => post('userAddress/deleteAddress ', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 默认地址
  // userAddress_default: data => post('userAddress/default', data, true, true),
  // /*
  //  *  ================订单=================
  //  */
  // // 普通商品下单
  // order_submitOrder: data => post('order/submitOrder', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 折扣商品下单
  // rebate_order: data => post('rebate/order', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 拼团商品下单
  // group_groupOrder: data => post('group/groupOrder', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 秒杀商品下单
  // spike_spikePay: data => post('spike/spikePay', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 订单详情
  // order_orderDetails: data => post('order/orderDetails', data, true, true),
  // // 取消订单
  // order_cancelOrder: data => post('order/cancelOrder', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 确认收货
  // order_confirmOrder: data => post('order/confirmOrder', data, true, true),
  // // 发起售后
  // order_applyRefund: data => post('order/applyRefund', data, true, true),
  // // 售后详情
  // order_refundDetails: data => post('order/refundDetails', data, false, true),
  // // 取消售后
  // order_deleteRefund: data => post('order/deleteRefund', data, true, true),
  // // 查询快递公司
  // order_selectExpressCode: data => post('order/selectExpressCode', data, true, true),
  // // 填写快递单号
  // order_fillExpressNo: data => post('order/fillExpressNo', data, true, true),

  // // 订单列表
  // order_getList: data => post('order/getList', data, true, true),
  // // 拼团订单
  // group_orderList: data => post('group/orderList', data, true, true),
  // /*
  //  *  ================购物车=================
  //  */
  // // 购物车列表
  // shoppingCar_myCart: data => post('shoppingCar/myCart', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 删除购物车
  // shoppingCar_deleteByIds: data => post('shoppingCar/deleteByIds', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 编辑购物车
  // shoppingCar_addOrSubGoods: data => post('shoppingCar/addOrSubGoods', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // // 购物车下单
  // shoppingCar_createOrder: data => post('shoppingCar/createOrder', data, true, true, Object.assign({
  //   'content-type': "application/json"
  // })),
  // /*
  //  *  ================微信支付=================
  //  */
  // //微信支付
  // wxPay_wxPay: data => post('wxPay/wxPay', data, false, true, true),
  // // 充值
  // wxPay_recharge: data => post('wxPay/recharge', data, false, true, true),
  // // 推荐二维码是否展示
  // index_isShow: data => post('index/isShow', data, false, true, true),
  // // 搜索店铺
  // shop_indexSelectShop: data => post('shop/indexSelectShop', data, false, true, true),
  // // 积分记录
  // mine_integralLog: data => post('mine/integralLog', data, false, true, true),
  // // 物流轨迹
  // order_logistics: data => post('order/logistics', data, false, true, true),
  // // 注销账号
  // mine_logout: data => post('mine/logout', data, false, true, true),
  // /*
  //  *  ================支付宝支付=================
  //  */
  // // 订单支付
  // alipay_alipay: data => post('alipay/alipay', data, false, true, true),
  // // 充值支付
  // alipay_rechargePay: data => post('alipay/rechargePay', data, false, true, true),
}

export default api;

//network/baseUrl.js

// ================================================================设置网络请求根路径
let baseUrl = (function() {
  // 请求根路径
  let urlStr = '';
  if (process.env.NODE_ENV === 'development') {
    console.log('开发环境');
    // #ifdef H5
    // urlStr = 'http://192.168.31/collect/';

    // #endif
    // #ifndef H5
    // urlStr = 'http://192.168.31/collect/';

    // #endif
  } else {
    console.log('生产环境');
    // #ifdef H5
     // urlStr = 'http://192.168.31/collect/';

    // #endif
    // #ifndef H5
     // urlStr = 'http://192.168.31/collect/';

    // #endif
  }
  return urlStr
})();
// ==================== 图片上传url==========
let uploadImgUrl = (function() {
  let urlStr = '';
  if (process.env.NODE_ENV === 'development') {
    // urlStr = 'http://192.168.31/collect/';

  } else {
    // urlStr = 'http://192.168.31/collect/';

  }
  return urlStr
})();

export default {
  baseUrl,
  uploadImgUrl
}

用的时候自己配置自己的baseUrl.js中urlStr,配置好自己本地的地址或者是线上的地址

怎么用嘞?

//在uniapp中调用接口的时候 如果需要在一进页面就请求数据就放到生命周期钩子里面
onLoad(){
    this.$rqt.loginIn().then(res=>{
            console.log(res)
    })
}
如果有参数啥的 就写在loginIn({写在这里面})

//如果需要自己请求参数 就写到方法里面就行了 请求接口的时候 建议用PostMan请求一下服务器看看能不能获取到数据

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...