uniapp封装ajax请求

news/2025/2/23 9:49:04
import '@/common/api/interceptor.js'; // 引入拦截器文件
export default{
	common:{
		baseUrl:"http://localhost:3000/api",
		data:{},
		header:{
			"Access-Control-Allow-Origin":"*",
			"Content-Type":"application/json",
			"Content-Type":"application/x-www-form-urlencoded"
		},
		method:"GET",
		dataType:"json"
	},
	//封装为选项对象
	request( options={} ){
		
		uni.showLoading({
		    title: '加载中'
		});
		
		options.url = this.common.baseUrl + options.url;
		options.data = 	options.data || this.common.data;
		options.header = options.header || this.common.header;
		options.method = options.method || this.common.method;
		options.dataType = 	options.dataType || this.common.dataType;
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success: (result) => {
					// if(result.statusCode===401)  进行类似过滤器的操作
					if(result.statusCode != 200){
						// 使其可以使用catch
						return rej();
					}
					setTimeout(function () {
					    uni.hideLoading();
					}, 1500);
					let data = result.data;
					// res里面就是请求体了 可以直接获取自己定义的code 和数据
					res(data);
				}
			})
		})
	}
}

这样就把uniapp的回调ajax封装为了resolve,这里还类似封装了axios的拦截器

// utils/interceptors.js



// 请求拦截器
uni.addInterceptor('request', {
  // 在发送请求之前执行
  invoke(request) {
    // 在请求发送前可以进行一些操作,例如添加请求头、设置认证信息等

	    request.header = {
	      'Content-Type': 'application/json', // 设置 Content-Type 请求头
	      'Authorization': 'Bearer your-token', // 设置 Authorization 请求头
	    };
    console.log('------请求拦截器------');
    return request;
  },
  // 请求出错时执行
  fail(error) {
    console.error('请求拦截器出错', error);
    return error;
  },
});

// 响应拦截器
uni.addInterceptor('response', {
  // 在响应返回之后执行
  invoke(response) {
    // 对响应数据进行处理
    console.log('响应拦截器');
	response.header={
		"Access-Control-Allow-Origin":"*"
	}
    return response;
  },
  // 响应出错时执行
  fail(error) {
    console.error('响应拦截器出错', error);
    return error;
  },
});

http://www.niftyadmin.cn/n/4972749.html

相关文章

React——组件缓存 react-activation

1、安装依赖 npm i -S react-activation 2、包裹根组件 import { AliveScope } from "react-activation"<AliveScope><App /> </AliveScope> 3、缓存组件 import { KeepAlive } from "react-activation"export default () > {co…

iMX6ULL 库移植 | Libgpiod 库的交叉编译及使用指南(linux)

GPIO口的操作&#xff0c;是很常见的功能。传统的GPIO sysfs接口已被弃用。自Linux 4.8起&#xff0c;内核提供了全新的操作gpio的方式libgpiod&#xff08;C library and tools for interacting with the linux GPIO character device&#xff09;&#xff0c;当然也更高效&am…

[论文阅读笔记26]Tracking Everything Everywhere All at Once

论文地址: 论文 代码地址: 代码 这是一篇效果极好的像素级跟踪的文章, 发表在ICCV2023, 可以非常好的应对遮挡等情形, 其根本的方法在于将2D点投影到一个伪3D(quasi-3D)空间, 然后再映射回去, 就可以在其他帧中得到稳定跟踪. 这篇文章的方法不是很好理解, 代码也刚开源, 做一…

Day41|leetcode 343. 整数拆分、96.不同的二叉搜索树

leetcode 343. 整数拆分 题目链接&#xff1a;343. 整数拆分 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;动态规划&#xff0c;本题关键在于理解递推公式&#xff01;| LeetCode&#xff1a;343. 整数拆分_哔哩哔哩_bilibili 题目概述 给定一个正整数 n &…

在 macOS 中安装 TensorFlow 1g

tensorflow 需要多大空间 pip install tensorflow pip install tensorflow Looking in indexes: https://pypi.douban.com/simple/ Collecting tensorflowDownloading https://pypi.doubanio.com/packages/1a/c1/9c14df0625836af8ba6628585c6d3c3bf8f1e1101cafa2435eb28a7764…

VR/AR/眼镜投屏充电方案(LDR6020)

VR眼镜即VR头显&#xff0c;也称虚拟现实头戴式显示设备&#xff0c;随着元宇宙概念的传播&#xff0c;VR眼镜的热度一直只增不减&#xff0c;但是头戴设备的续航一直被人诟病&#xff0c;如果增大电池就会让头显变得笨重影响体验&#xff0c;所以目前最佳的解决方案还是使用VR…

从探索到明确,比特币与美股等传统资产相关性如何?

早期阶段&#xff0c;比特币经历了一段摸索和模仿的时期&#xff0c;这是因为当比特币刚刚出现时&#xff0c;比特币的价值和用途在这一阶段并不明确&#xff0c;人们对其性质和潜力还不太了解。 然而&#xff0c;随着时间的推移&#xff0c;比特币去中心化、固定供应上限等特点…

windows10 docker 安装在D盘

win10安装docker后发现c盘空间急速减少&#xff0c;360管家查看发现images镜像安装在C盘&#xff0c;于是重装docker desktop以为在安装过程中能够选择&#xff0c;遗憾的是没有提供选择权限&#xff0c;默认直接就安装到了c盘。 desktop 迁移 百度得知可以将c盘的docker安装…