uniapp 如何封装uni.request请求(登录接口、业务接口)

简介: uniapp 如何封装uni.request请求(登录接口、业务接口)

一、新建目录

根目录下新建util(文件/文件夹名字随意)文件夹,下面新建request.js请求;

20210527153548522.png

二、util/request.js文件夹内容

这个是一个登录功能的请求接口,请求的header大家根据实际情况来写

/**
 * @param { url } 接口地址
 * @param { method } 请求方式
 * @param { data } 请求参数
 * @param { header } 请求头/token/cookie
 * @param { hideLoading }  显示加载动画
 * @dataType 解析为JSON
 * 
 */
import Vue from 'vue';
var _this = Vue.prototype
const baseURL = "http://192.168.0.31:8080"
const request = (options) => {
  var hideLoading = options.hideLoading || false;
  const language = uni.getStorageSync('language') ?? 'zh-HK'; //多语言
  const cookie = 'xxxxx'; // 自己需要携带的Cookie内容
  if (!hideLoading) {
    uni.showLoading({
      title: _this.l('Loading'), // 这是我们的多语言写法
    })
  }
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + options.url,
      method: options.method || "GET",
      data: options.data || {},
      header: {
        'content-Type': 'application/json;charset=UTF-8',
        'UxSoft.Localization.CultureName': language, // 自定义请求头
        Cookie: cookie,
        token: uni.getStorageSync('userToken') ?? '',
      },
      dataType: 'json',
      success: res => {
        if (res.data.code === 403) {
          let userInfo = uni.getStorageSync('userInfo'),  
            password = uni.getStorageSync('password'),
            phoneNumber = uni.getStorageSync('phoneNumber'),
            phoneAreaCode = uni.getStorageSync('phoneAreaCode');
          if (userInfo  && password &&
            phoneNumber && phoneAreaCode) {
            _this.$request({
              url: '/app/VipUserController/login',
              method: 'GET',
              hideLoading: true,
              data: {
                password: password,
                phoneNumber: phoneNumber,
                phoneAreaCode: phoneAreaCode
              }
            }).then(res => {
              let routes = getCurrentPages() || [];
              let currentRoute = routes[routes.length - 1]
              if (res.data.result && res.data.result.token) {
                uni.setStorageSync('userToken', res.data.result.token);
                if (currentRoute) {
                  uni.reLaunch({
                    url: currentRoute.$page.fullPath,
                    success(s) {
                      console.log('登录重定向成功:', s)
                    },
                    fail(e) {
                      console.log('登录重定向失败:', e)
                    }
                  })
                } else {
                  uni.reLaunch({
                    url: '/platforms/mp-weixin/mine/mine'
                  })
                }
              } else {
                uni.showModal({
                  title: _this.l('Tips'),
                  content: res.data.error,
                  showCancel: false,
                  success: function(res) {
                    uni.removeStorageSync('userInfo');
                    uni.reLaunch({
                      url: '/platforms/mp-weixin/discount/discount'
                    })
                  }
                });
              }
            }).catch(err => console.log('重新登陆错误:', err))
          } else {
            uni.showToast({
              title: _this.l('LoginExpiration'),
              icon: 'none',
              duration: 3000,
            });
            uni.removeStorageSync('userInfo');
            setTimeout(() => {
              uni.reLaunch({
                url: '/platforms/mp-weixin/discount/discount'
              })
            }, 3000)
            return;
          }
          reject();
        } else {
          resolve(res)
        }
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        if (!hideLoading) {
          uni.hideLoading()
        }
        resolve();
        return;
      }
    })
  })
}
export {
  baseURL,
  request
}

三、在 api 文件夹下 mine 模块导入 request

Tips: 注意导入方式  { request }

import {
  request
} from "@/util/request.js"
// 获取用户 积分
export function countTotalPoint(data) {
  return request({
    url: '/app/VipPointLog/countTotalPoint',
    method: 'POST',
    hideLoading: false,
    data: data
  })
};
// 刷新用户信息
export function miniProgramMemberInfo(data) {
  return request({
    url: '/app/VipUserController/miniProgramMemberInfo',
    method: 'POST',
    hideLoading: true,
    data: data
  })
};

四、在页面使用

mine 页面

import { countTotalPoint, miniProgramMemberInfo } from '@/api/mp-weixin/mine/mine.js';
//refresh userInformation
refreshUserInformation() {
  miniProgramMemberInfo({ id: uni.getStorageSync('vipCardId') }).then(result => {
    if (!result.data.result) {
      return;
    }
    let user = result.data.result;
    uni.setStorageSync('userInfo', user);
    this.$setCompanyName(user.vipCardList[0].companyRegionCode);
  });
}
相关文章
|
6月前
|
前端开发 API UED
封装 uniapp 请求库的最佳实践
背景 在前端开发中,HTTP 请求是与服务器进行数据交互的核心手段。无论是获取数据还是提交数据,前端应用几乎都离不开 HTTP 请求。在 uniapp 中,uni.request 是官方提供的用于发起 HTTP 请求的基础 API。然而,直接使用 uni.request 存在一些问题和不足,比如: 1. 代码冗余:每次发起请求时都需要编写类似的配置代码,导致代码重复。 2. 缺乏统一管理:没有统一的地方管理请求参数、头信息、错误处理等,使得代码不易维护
206 7
|
10月前
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
713 3
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
1079 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
uniapp【组件封装】时间戳格式化为星期
uniapp【组件封装】时间戳格式化为星期
162 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
280 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章