uni-app接口请求封装

首先根目录下新建文件夹取名随意，这里我取名common（意为：常见的、共有的）

然后新建request.js文件，贴入以下代码

let server_url = '';  //请求根路径（服务器地址）





let token = '';//token令牌





// process.env.NODE_ENV === 'development' ? 'http://192.168**:6002' : 'http://***/api'; //环境配置，一般这个地址是需要创建一个单独的配置文件向外暴露变量的，因为有时上传文件也需要用到





//向外暴露一个方法，传入一个默认值（空对象）





export function service(options = {}) {





	uni.getStorageSync('token') &&(token = uni.getStorageSync('token'));//从本地缓存中获取token





	options.url = `${server_url}${options.url}`;//前面为你的服务器地址，后面为具体接口地址





	//配置请求头





	options.header = {





		// 'content-type': 'application/json',//默认请求头，可不写





		'Authorization': `${token}` //Bearer ，你请求数据需要的自定义请求头（令牌）





	};





// 创建promise，因为接口请求无非就两种情况，成功或失败，成功就.then处理，失败就可以统一处理（弹框提示等等）





	return new Promise((resolved, rejected) => {





		//成功





		options.success = (res) => {





			if (Number(res.data.code) == 200) { //请求成功





				resolved(res.data);//请求成功时返回接口数据





			} else {





				uni.showToast({





					icon: 'none',





					duration: 3000,





					title: `${res.data.desc}`





				});//弹窗提示接口调用失败的信息





				rejected(res.data.desc); //这里调用promise的rejected方法传入错误信息，这样就可以在调用的接口地方直接.catch拿到错误信息了





			}





 





		}





		//错误（一般没有网络的情况下会走这里）





		options.fail = (err) => {





			rejected(err); //请求失败时返回错误信息





		}





		uni.request(options);//调用uni的api，传入配置我们的外部配置参数





 





	});





}

注意事项：如果是H5端一般会有跨域问题（小程序端不存在跨域问题），具体可在项目manifest文件中配置

	"h5": {





		// 开发环境 server 配置





		"devServer": {





			"port": 8088,//端口号，这个自己随便配置，防止开发多个项目是端口号冲突，跟跨域配置没关系





			"disableHostCheck": true,//禁用 Host 检查





			





			// 能成功跨域的前提是:本地跑项目的端口需要与后台接口允许跨域的端口一致





			"proxy": {





				"/api/sys": {





					"target": "http://192.168**:6002",//请求目标路径





					"changeOrigin": true,//当为true时，代理服务器向后端发送请求时端口号会与后端端口号一致，vue里面默认为true，react默认为false，如果为false，向后端发送请求时后端显示的端口号就还是本地的端口号，如果后端没有做出限制还是能请求





					"secure": false,





					"ws": false,//用于支持websocket,默认为true





					// "pathRewrite": {//重写本地发起的路径





					// 	"^/api/sys": "/api"//正则表达式，将/api/sys变成/api，如果接口接口地址有api这个路径就变成api,如果没有就把他变成空字符串





					// }





				},





                //可配置多个





				"/api/contract": {





					"target": "http://192.168.**:6001",//目标地址





					"changeOrigin": true,//允许跨域





					"secure": false,





					"ws": false





				}





			}





		}





	}

使用：新建api.js文件（用于管理所有的api接口），如果项目比较大建议在每个模块的文件夹下都建一个api.js,或者建一个文件夹下面创建多个api.js文件

第一步：参数配置

import {service} from '../../../common/request.js'//request向外暴露的方法





 





 





 





export function login(data) {





//传入对应的配置对象





  return service({





    url: '/api/sys/loginController/userLogin',//接口地址





    method: 'GET',//请求方法





    data//请求接口需要的参数





  })





}

第二步：页面调用

import {login} from './api.js'//具体根据你项目的路径修改





 





click() {





	//params为接口需要的参数





	login(params).then(res => {





		if (res.code == 200) { //一般成功状态码都是200，根据实际情况判断





			//此处为接口调用成功之后需要做的事情





		} else {





			//否者就是不成功，一般会弹出错误信息





		}





	})





}

参考链接：https://blog.csdn.net/weixin_52941842/article/details/124160780