uniapp的request封装及使用

最新推荐文章于 2025-10-24 09:34:44 发布

原创最新推荐文章于 2025-10-24 09:34:44 发布 · 2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

本文介绍了一种在uni-app中实现网络请求的方法，通过创建一个通用的request函数简化请求过程，并利用拦截器处理统一的错误反馈及登录状态验证。

1.首先创建一个unit文件，然后创建request.js

// 服务器地址
const BASE_URL = '/api' // 代理的api或者后端地址

// 请求,参数{url:'', data:{}, method:'POST'}
export const request = (options) => {
	return new Promise((resolve, reject) => {
		console.log(options.url);
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			// header:{token: uni.getStorage('user') ? uni.getStorage('user').token : ''},
            // 后端需要的请求头
			header: {
				Authorization: uni.getStorageSync('token') ?
					`Bearer ${uni.getStorageSync('token')}` : '',
				Client: 'APP'
			},
			data: options.data || {},
			success: res => {
				const data = res.data
				if (data.code === 401) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				resolve(data)
			},
			fail: error => {
				uni.showToast({
					icon: 'error',
					title: '操作错误'
				})
				reject(error)
			}
		})
	})
}

2.在api文件中引用

import { request } from '@/utils/request.js'

/**
 * 接口
 * @param data  请求数据
 * @@return
 */
export const add = data => {
	return request({
		url: '接口',
		method: '请求方法',
		data 
	})
}

3.使用

import { getList } from '@/api/getList.js'

// 然后直接使用
methods: {
	/**获取数据*/
	init(){
		getList(this.paramas).then(res => {
			console.log(res)
		})
	},
}