Vue3+TS版本Uniapp:封装uni.request请求配置

这篇具有很好参考价值的文章主要介绍了Vue3+TS版本Uniapp:封装uni.request请求配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:前端小王hs

阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主

封装拦截器

uniapp的封装逻辑不同于Vue3项目中直接使用axios.create()方法创建实例(在create方法中写入请求的地址、请求头、超时等内容),代码如下:

const instance = axios.create({
	// 后端url地址
	baseURL: import.meta.env.VITE_API_BASEURL,
	timeout: 6000, //设置超时
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
});

PS:上述代码来自博主在B站的Vue3全家桶+MySQL+Express全栈实战项目源码

uniapp中,需要使用到一个官方的APIuni.addInterceptor(STRING, OBJECT),这是一个用于拦截作用的API,在规范开发的过程中,会在请求之前为请求的内容拼接url、超时和请求头等信息,这一点在官方文档API的基础拦截器一文中详细的示例,代码如下:

uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后,修改code值为1
    args.data.code = 1
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

所以可以封装一个拦截器的配置项,为所有的uni.request添加请求前置信息,代码如下:

const baseURL = import.meta.env.VITE_API_BASEURL
// 添加拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options: UniApp.RequestOptions) {
    // 假设开头为非http的请求url地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 请求超时
    options.timeout = 6000
    options.header = {
      ...options.header,
      // 自定义标识符,用于后端区分app、后台或其他渠道请求
      'source-client': 'app',
    }
    // 添加 token 请求头标识
    const token = uni.getStorage('token')
    if (token) {
      options.header.Authorization = token
    }
  },
}

uni.addInterceptor('request', httpInterceptor)

这是一段万能的uniapp封装拦截器代码,读者可收藏此文章粘贴即用,下同

封装uni.request

这里的封装,参考了axios返回promise对象的实现逻辑,在接口中return一个promise对象,便于在实际环境中更好的获取数据以及进一步处理数据,代码如下:

type Data<T> = {
	// 后端返回的通用响应结构
	statusCode: string
	msg: string
	result: T
}
// UniApp.RequestOptions为配置网络请求的选项
// 这里使用了泛型,便于自定义响应结构
export const http = <T>(options: UniApp.RequestOptions) => {  
  return new Promise<Data<T>>((resolve, reject) => {  
    uni.request({  
      // 拦截器配置内容
      ...options,
      success(res) {
      	// 成功响应
        handleResponse(res, resolve, reject);
      }, 
      fail(err) { 
        handleError(err, reject);
      },  
    });  
  };  
};  

// resolve和reject不返回任何值,但通知promise更改状态
const handleResponse = <T>(res: any, resolve: (value: Data<T>) => void, reject: (reason?: any) => void) => {
  // 分离了验证状态码逻辑
  if (isSuccessStatusCode(res.statusCode)) {  
    resolve(res.data as Data<T>);
  // 登录失败
  } else if (res.statusCode === 401) {  
    // 假设 clearUserInfo 是清除用户信息的函数 
    clearUserInfo();
    // 跳转至登录页面
    uni.navigateTo({ url: '/pages/login/index' });
    reject(res);
  } else {
  	// 分离了报错状态码逻辑
    showErrorToast(res.data as Data<T>); 
    reject(res);
  }  
};  
  
const handleError = (err: any, reject: (reason?: any) => void) => {
  uni.showToast({
    icon: 'none',  
    title: '网络可能开小差了~',  
  });
  reject(err);
};
  
const isSuccessStatusCode = (statusCode: number) => {
  return statusCode >= 200 && statusCode < 300;
};
  
const showErrorToast = <T>(data: Data<T>) => {
  uni.showToast({
    icon: 'none',
    title: data.msg || '请求错误',
  });
};

关于RequestOptions更多的信息,可以对其ctrl+点击查看内置的接口信息,如下图所示:
vue3封装uniapp的api请求,uniapp+nest,uni-app,前端,javascript,vue,前端小王hs,小程序,微信小程序文章来源地址https://www.toymoban.com/news/detail-855321.html

到了这里,关于Vue3+TS版本Uniapp:封装uni.request请求配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

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

    2024年02月09日
    浏览(91)
  • uniapp封装request请求

    在基础文件里面创建一个api文件 在创建两个 js文件  http.js 里面封装 request 请求 在 service.js 封装要调用的接口 在页面 引入接口文件

    2024年02月14日
    浏览(34)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)
  • vite+vue3+ts项目构建详细步骤(配置多语言版本)

    时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。 然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇

    2024年02月05日
    浏览(48)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(51)
  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

    首先要知道eslint与prettier的区别,ESLint 是一个用于检测 JavaScript 代码中的错误和潜在问题的工具。它只关注你写的代码是否正确,不会管你代码的格式;Prettier 则是一个代码格式化工具,它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则,在

    2024年03月16日
    浏览(66)
  • 小程序-uni-app:uni-app-base项目基础配置及使用/uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月15日
    浏览(96)
  • 小程序-uni-app:uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月05日
    浏览(587)
  • uni-app封装request请求及get、post、put等方法

    直接上代码 request.js文件 export default {   common: {     baseUrl: \\\"http://172.20.4.212:3000/api\\\",     data: {},     header: {       \\\"Content-Type\\\": \\\"application/json\\\",       \\\"Content-Type\\\": \\\"application/x-www-form-urlencoded\\\"     },     method: \\\"GET\\\",     dataType: \\\"json\\\"   },   request (options = {}) {     uni.showLoading({  

    2024年02月09日
    浏览(44)
  • 【uniapp】uni.request请求跨域问题解决方案

    例如,运行H5页面,请求一个地址资源,如果不是本站地址,浏览器就会报跨域错误,这样访问受限 例如,项目代码里是这样写的,运行H5测试 因为 https://gitcode.net 不是本站地址,根据浏览器同源策略,是会报跨域错误, 打开项目的 manifest.json 文件,以源码视图查看,添加以

    2024年02月05日
    浏览(71)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包