uniapp封装公共的带token的请求方法

最新推荐文章于 2024-11-12 09:49:17 发布

郭辰羽

最新推荐文章于 2024-11-12 09:49:17 发布

阅读量1.6k

点赞数

分类专栏：笔记文章标签： app

本文链接：https://blog.youkuaiyun.com/qq_49552046/article/details/120335888

版权

笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在前端项目中统一API调用的方法。通过创建config.js来配置公共请求地址，并利用request.js来封装通用请求逻辑，包括自动携带token等。此方案还实现了全局错误处理，确保了项目的稳定性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先创建一个config.js的文件，在里面配置你公共的请求地址

 const baseurl = '公共部分的请求地址';  //公共接口请求地址
 export default baseurl;

然后再创建一个request.js的文件，里面配置一些公共的部分

import baseurl from './conifg.js'
// 公共的请求
const request = function(options,otherUrl){
	options.url = otherUrl?otherUrl+options.url:baseurl + options.url
	try {
		const token = uni.getStorageSync('token');
		// const username = uni.getStorageSync('username');
		if (token) {
			options.header = options.header?options.header:{}
		} else {
			uni.navigateTo({//当token失效时跳转的网页
				url: '/pages/index/index.vue'
			});
			return;
		}
	} catch (err) {
		console.log(err)
	}
	return uni.request(options);
}
export default request;

最后在main.js全局进行引入就可以了

 import request from "./requst.js"

 Vue.prototype.$request=request

然后在页面可以这样使用

 this.$request({
		url: '/?s=Clients.Apis.SaveSealingPointData',
		data: {

			},
		success: (res) => {
			console.log(res);
			}
		})