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