【uniapp&微信小程序】封装uni.request()

这篇具有很好参考价值的文章主要介绍了【uniapp&微信小程序】封装uni.request()。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【uniapp&微信小程序】封装uni.request()

前言

        在项目开发过程中,往往需要对请求进行二次封装,这篇文章将对uni.request()进行二次封装,并实现多个环境的请求配置,对请求方式,数据格式等进行封装,将请求做到最简化。

一.封装uni.request()

第一步基于uni.request()进行二次封装,集成项目开发中需要的参数及方法。

新建src/request/index.ts文件内容如下: 

/**
 * 创建request请求
 * @returns
 */
const request = <T = any>(
  url: string, //接口地址
  type: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT', //请求方式
  data: AnyObject, //请求的参数
  header: any //设置请求的 header
): Promise<T> => {
  // 拼接url  config.base后面会讲到
  let apiUrl = config.base + url
  // 这里是获取存在Store中的token,获取方式根据自身项目来
  const userStore = useUserStore()
  // 全局添加请求头
  let obj = {
    // 获取Store中的token || 获取本地存储的token
    'Authori-zation': (userStore.token || storage.getData("TOKEN") || ""),
  }
  if (header) {
    // 有无传入header,有则合并
    let headers = Object.assign(header, obj);
    header = headers;
  } else {
    header = obj
  }
  if (data) {
    // 清除无用参数
    Object.keys(data).forEach(key => {
      if (data[key] == null || data[key] == undefined || data[key] === '') {
        delete (data[key]);
      }
    })
  }

  return new Promise((resolve, reject) => {
    uni.request({
      url: apiUrl,
      method: type,
      data,
      header,
      success(res) {
        if (res.statusCode == 200) {
          const data: any = res.data;
          if (data.code == 0) {
            // 正常抛出数据
            resolve(data.data as T)
          } else {
            if(data.code == 401) {
              // 未登录
              uni.redirectTo({
                url: ""  //未登录跳转指定页面
              })
              uni.hideLoading();
              return reject(data);
            }
            // 错误数据
            uni.hideLoading();
            // 弹窗错误框,这里是自己封装组件,
            common.toastErr(data.message || "网络请求异常") 
            reject(data);
          }
        } else {
          console.log(data)
          uni.hideLoading();
          common.toastErr("网络请求异常")
          reject(data)
        }
      },
      fail(err) {
        console.log(err)
        uni.hideLoading();
        common.toastErr("网络请求异常")
        reject(err)
      }
    })
  })
}

二.根据环境配置请求地址

        上面我们已经对uni.request()进行了封装,前面代码中提到的config.base就是我们需要获取的地址,在项目开发过程中,往往会有多个环境,如开发环境、预生产环境、生产环境等等,那我们怎么根据不同环境来配置对应的请求地址或其他信息呢?

要做到根据不同环境读取不同配置信息,那我们这里就需要用到uni.getAccountInfoSync()方法,该方法可以获取当前小程序账号信息,其返回值miniProgram属性的envVersion值,就是我们想获取的当前小程序环境:

属性 类型 说明
envVersion string 小程序当前环境版本:develop开发板;trial体验版;release正式版

已经解决了获取环境问题,那我们就可以来配置不同环境啦,这里分三种环境:

  • dev 开发环境
  • test 测试环境
  • prod 生产环境

在src下新建config文件,其下dev,test,prod三个文件夹用来配置对应信息。

先对配置进行ts规范,因为项目中可能不知请求地址一个配置,可能还有应用地图的key等其他信息,我们可以统一配置,新建config/types.ts  如下:

export interface IConfig {
  // 接口主地址
  base: string;
  // 环境模式
  mode: string;
  // 地图key
  mapKey: string;
  // 密钥
  secretKey: string;
}

 接下来就是具体内容的配置,新建config/dev/index.ts如下:

// dev 开发环境
import {IConfig} from "../types";

const test: IConfig = {
  // #ifdef H5
  base: "",
  // #endif

  // #ifdef MP-WEIXIN
  base:'http://192.168.1.15:8090/api',
  // #endif
  // 模式
  mode: "dev",
  // 地图key
  mapKey: "",
  // Secret Key
  secretKey: ""
}

export default test;

 新建config/test/index.ts如下:

// test 测试环境
import {IConfig} from "../types";

const test: IConfig = {
  // #ifdef H5
  base: "",
  // #endif

  // #ifdef MP-WEIXIN
  base:'http://192.168.1.15:8090/api',
  // #endif
  // 模式
  mode: "test",
  // 地图key
  mapKey: "",
  // Secret Key
  secretKey: ""
}

export default test;

  新建config/prod/index.ts如下:

// prod 生产环境
import {IConfig} from "../types";

const test: IConfig = {
  // #ifdef H5
  base: "",
  // #endif

  // #ifdef MP-WEIXIN
  base:'http://www.baidu.com/api',
  // #endif
  // 模式
  mode: "prod",
  // 地图key
  mapKey: "",
  // Secret Key
  secretKey: ""
}

export default test;

上面三个文件中使用了#ifdef #endif 注释,这是因为我们的项目可能不只是在小程序上运行,如我开发过的项目就有一个溯原H5页面,那这时候就得区分不同平台,这里简单介绍一下如何区分:

 #ifdef #endif其实就是条件编译,条件编译是用特殊注释作为标记,在编译时根据特殊注释,将注释里面的代码编译到不同平台,其写法如下:

已 #ifdef #ifndef   %PLATFORM%  开头 ,中间部分写代码,以 #endif 结尾。

  • #ifdef :if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称,如H5,MP-WEIXIN 

所以上面三个文件中条件编译的意思就是只在微信小程序存在/只在H5页面存在。

此时我们已经准备好了三种环境下的配置,那么接下来就是对当前环境的判断及使用,在config下新建index.ts 内容如下: 

import { IConfig } from "./types";
import prod from "./prod";
import test from "./test";
import dev from "./dev";

let obj: IConfig;

// #ifdef MP-WEIXIN
const plat = uni.getAccountInfoSync().miniProgram.envVersion
if(plat === "release") {
  obj = prod
} else if(plat === "trial") {
  obj = test
} else {
  obj = dev
}
// #endif

// #ifdef H5
if(import.meta.env.MODE === "production") {
  obj = prod
} else if(import.meta.env.MODE === "test") {
  obj = test
} else {
  obj = dev
}
// #endif
export default obj;

这一文件中就用到了上面讲的获取当前环境的方法,来配置对应信息,前面在request/index文件中提到的config.base就是来自于此。

三.封装请求方式

        到这个位置其实我们的封装已经可以使用了,但是在实际开发中,还分有get,post,put,delete等请求方式,及json,form表单等数据格式,那为了后续开发的便捷,我们还有继续根据请求方式及数据格式封装请求,这一部分就继续写在request/index.ts 文件中:

/**
 * http get 请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const get = <T = any>(
  url: string,
  data: AnyObject
): Promise<T> => {
  return request(url, 'GET', data, {})
}

/**
 * http post json请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const postJ = <T = any>(
  url: string,
  data: AnyObject
): Promise<T> => {
  return request(url, 'POST', data, {
    'Content-Type': 'application/json'
  })
}

/**
 * http post form表单请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const postW = <T = any>(
  url: string,
  data: AnyObject
): Promise<T> => {
  return request(url, 'POST', data, {
    'Content-Type': 'application/x-www-form-urlencoded'
  })
}

/**
 * http put json请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const putJ = <T = any>(url: string, data: AnyObject): Promise<T> => {
  return request(url, 'PUT', data, {
    'Content-Type': 'application/json'
  })
}

/**
 * http put form表单请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const putW = <T = any>(url: string, data: AnyObject): Promise<T> => {
  return request(url, 'PUT', data, {
    'Content-Type': 'application/x-www-form-urlencoded'
  })
}
/**
 * http delete请求
 * @param url 请求接口
 * @param data 请求参数
 * @returns
 */
const del = <T = any>(url: string, data: AnyObject): Promise<T> => {
  return request(url, 'DELETE', data, {})
}


export default {
  get,
  postJ,
  postW,
  putJ,
  putW,
  del
}

四.调用请求

接下来我们就根据上面封装的请求来试一试效果吧,新建src/apis文件:

//引入封装方法
import http from "@/request";

export const getTest = () => http.get<any>(`url`, {})

export const postTest = (data:any) => http.postJ<any>(`url`, data)

总结 

        可以看到,封装之后的请求已经非常精简,配置好各个环境地址,根据请求方式,数据格式,选择对应的封装方法即可。文章来源地址https://www.toymoban.com/news/detail-487199.html

到了这里,关于【uniapp&微信小程序】封装uni.request()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 封装request请求

    创建 utils 文件夹后创建 api 文件夹创建 request.js 创建 index.js

    2024年02月15日
    浏览(50)
  • 微信小程序封装wx.request请求

    对微信小程序的印象我还停留在2年前刚入行的时候,那是还不懂什么是Promise,只知道小程序发请求有时候要在success回调中嵌套好多层(后来我才知道这叫 回调地狱 )。最近刚好有个小程序的项目交给我发开发,加上如今的我自认为对Promise掌握的还可以,所以这次也尝试着封

    2024年02月16日
    浏览(47)
  • 微信小程序 wx.request 请求封装

    1、添加一些统一的参数或者配置 2、加上默认的请求头和cookie(有就加,没有就为空) 3、将参数,即传入的url地址、请求头传入请求中 4、封装 post 和 get 请求,使代码使用更加方便,以维护

    2024年02月16日
    浏览(43)
  • 微信小程序---封装uni.$showMsg()方法

    当数请求失败之后,经常需要调用 uni.showToast(( /* 配置对象/ 方法来提示用户时,可以在全局封装一个 uni.showMsg()方法,来简化 uni.showToast() 方法的调用。具体的改造步骤如下: 1.在main.js中,为uni对象挂载自定义的$showMsg()方法: 2.在需要提示消息的时候,直接调用uni.$showMsg()方法

    2024年01月16日
    浏览(41)
  • UniApp项目中 使用微信小程序原生语言 进行开发

    wxcomponents 下放的是微信小程序原生代码写的组件。我进行了封装 在你下uniApp 项目的根目录创建一个 wxcomponents 名字千万不要错 京东、支付宝灯参考下面图片 官方文档也有介绍 然后在你需要引入原生功能的页面里面引入你的组件(我这里提前已经放过来了。在上面图可看到

    2024年02月04日
    浏览(75)
  • HbuilderX运行uniapp项目到微信小程序时,自动打开了微信小程序开发工具但是进不去项目

    这样选择之后,运行时一直停在打开微信开发者工具不能进入项目,如图: 这是因为你当前不是这个微信小程序的开发者,联系管理员添加你为当前小程序的开发者就行了。 或者是更换appid

    2024年02月11日
    浏览(66)
  • 微信小程序 基于Promise 对 wx.request 封装处理

    当我们进行微信小程序开发的时候,会经常涉及到发送网络请求来进行后台数据交互,而在微信小程序中,用来 发送请求的方法是 wx.request() , 但是由于 wx.request() 方法 不支持 Promise 风格的调用,所以导致 wx.request() 用来发送异步请求的时候,会触发成 回调地狱 的表现, 以及

    2024年02月04日
    浏览(47)
  • 微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined

    开发者工具控制台报错 Uncaught (in promise) undefined,如图: 该错误主要是因为调试基础库过高或过低导致的。 在 微信开发者工具 — 详情 — 本地设置 — 调试基础库 中,将调试基础库版本调低或调高即可 调试基础库:此处选择的基础库为微信中的基础库版本,且仅用于开发者

    2024年02月12日
    浏览(71)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月08日
    浏览(81)
  • Vue3+TS版本Uniapp:封装uni.request请求配置

    作者: 前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 uniapp 的封装逻辑不同于 Vue3 项目中直接使用 axios.create() 方法创建实例(在 create 方法中写入请求的地址、请求头、超时等内容),代码如下: PS:上述代码来自博主在B站的

    2024年04月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包