封装的uniapp网络请求,适用vue2、vue3,不适用vue3+ts

let BASE_URL = "";
if (process.env.NODE_ENV === 'development') {
	// 开发环境 示例
	BASE_URL = "http://10.13.70.240:9091";
} else if (process.env.NODE_ENV === 'production') {
	// 生产环境 示例
	BASE_URL = "https://twin-ui.com/demo/";
}

// 封装网络请求
const request = async (url, data = {}, method,type, loading = true) => {
	var token = uni.getStorageSync('token');
	let header = {
		"Content-Type": "application/json;charset=UTF-8",
		"Accept": "application/json",
	}

	if(type == '1'){
		header = {
			"Content-Type": "application/json;charset=UTF-8"
		}
	}
	else if (type == '2'){
		// 文件上传时的请求头格式
		header = {
			"Content-Type": "multipart/form-data;" 
		}
	}else {
		// 国际化中英文的请求头
		// if(uni.getStorageSync('language')) {
		// 	let yy = uni.getStorageSync('language')
		// 	header.language = yy
		// 	console.log(header);
		// }
	}
	if (token) {
		header.accessToken = token;
	}
	return new Promise((reslove, reject) => {
		uni.showLoading({
			// title: _that.$t('index.logging-in'), //正在登录
			title: "正在加载", //正在登录
			mask: true
		});
		uni.request({
			url: BASE_URL + url,
			method: method || 'GET',
			header: header,
			// timeout: 1000000000,
			data: data || {},
			success: (res) => {
				uni.hideLoading();
				if (res.statusCode == 200) {
					reslove(res.data)
				} else {
					// toast('网络连接失败,请稍后重试')
					reject(res)
				}
			},
			fail: (err) => {
				uni.hideLoading();
				uni.showToast({
					title: '请求失败',
					icon: 'none',
					duration: 2000,
				})
				reject(err)
			}
		})
	})
}

export default request

使用:

// 引入请求
import request from '@/config/request.js'


//测试用例
export const logins = data => request('/custom/access/h5/wxLogin', data, 'post')

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp是一个基于Vue.js的跨平台开发框架,可以同时开发iOS、Android、H5等多个平台的应用。Vue 3是Vue.js的最新版本,带来了许多新特性和改进。在UniApp中使用Vue 3和TypeScript来封装请求可以按照以下步骤进行: 1. 安装依赖:在UniApp项目中,首先需要安装axios库和@types/axios库,用于发送HTTP请求和提供TypeScript类型定义。 ```bash npm install axios @types/axios ``` 2. 创建请求封装文件:在项目的`src`目录下创建一个`api`文件夹,并在该文件夹下创建一个`request.ts`文件,用于封装请求相关的代码。 ```typescript import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; // 创建axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送请求之前做一些处理,例如添加token等 return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response: AxiosResponse) => { // 对响应数据进行处理,例如统一处理错误码等 return response.data; }, (error) => { // 处理响应错误 return Promise.reject(error); } ); // 封装GET请求 export function get(url: string, params?: any): Promise<any> { return instance.get(url, { params }); } // 封装POST请求 export function post(url: string, data?: any): Promise<any> { return instance.post(url, data); } // 其他请求方法的封装,例如PUT、DELETE等 ``` 3. 使用请求封装:在需要发送请求的地方,引入`request.ts`文件,并调用相应的请求方法。 ```typescript import { get, post } from '@/api/request'; // 发送GET请求 get('/user/info', { id: 1 }) .then((response) => { console.log(response); }) .catch((error) => { console.error(error); }); // 发送POST请求 post('/user/login', { username: 'admin', password: '123456' }) .then((response) => { console.log(response); }) .catch((error) => { console.error(error); }); // 其他请求方法的使用,例如PUT、DELETE等 ``` 以上就是在UniApp中使用Vue 3和TypeScript封装请求的基本步骤。你可以根据实际需求进行进一步的封装和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值