2024年7月1日最新 uni-app 封装网络请求最新

这个文件会导入到api.js里面

request.js
下面是request.js的内容
=============================================

// 全局请求封装
const base_url = 'https://tenapi.cn/v2/'    //请求的接口地址头
const timeout = 5000                       // 请求超出时间
export default (params) => {       
	let url = params.url;                 //请求接口的路劲参数
	let method = params.method || "get";  //请求的类型
	let data = params.data || {};         //请求参数
	
    return new Promise((resolve, reject) => {
			uni.request({                 //uniapp发起网络请求的方法            
				url: base_url + url,      //和axios差不多
				method: method,           //请求方式。git  post 这些
				data: data,               //请求参数
                // header: header,        //没有使用请求头，有需要可以加上(我也没用过这个)
	            timeout,                  //请求超出的时间、、超时了就不工作了。
				success(res) {
                    if (res.statusCode == 200) {
						resolve(res.data);
					}else {
					    uni.clearStorageSync()
					    if (res.data.code === 200) {
                    } else {
						console.log('无接口返回数据正在重新调用');
            }
				switch (res.statusCode) {
                        // case 401:
						// 	uni.showModal({
						// 		title: "提示",
						// 		content: "请登录",
						// 		showCancel: false,
						// 		success() {
						// 			setTimeout(() => {
						// 				uni.navigateTo({
						// 					url: "/pages/login/index",
						// 				})
						// 			}, 1000);
						// 		},
						// 	});
						// 	break;
						// case 404:
						// 	uni.showToast({
						// 		title: '请求地址不存在...',
						// 		duration: 2000,
						// 	})
						// 	break;
						// default:
						// 	uni.showToast({
						// 		title: '请重试...',
						// 		duration: 2000,
						// 	})
						// 	break;
       //这里可以处理  401  402  403  404  这些错误当然上面也可以，我就是在上面处理了
                            
                    }
			    }
			},
            fail(err) {
                =====这里处理一些错误，比如网络异常（没网了） 类似的一些问题====
				console.error('请求失败:', err);
				console.log(err)
				// if (err.errMsg.indexOf('request:fail') !== -1) {
				// 	wx.showToast({
				// 		title: '网络异常',
				// 		icon: "error",
				// 		duration: 2000
				// 	})
				// } else {
				// 	wx.showToast({
				// 		title: '未知异常',
				// 		duration: 2000
				// 	})
				// }
				reject(err);
			},
			// complete() {
			// 	// 不管成功还是失败都会执行
			// 	uni.hideLoading();
			// 	uni.hideToast();
			// }
		});
	}).catch(() => {});  //这个我也忘了是什么了
};

这个是api.js文件
api.js
下面是api.js的内容
===================================

import request from '/utils/request/request.js'  
//这里引入我刚才创建的request.js  request这名字是可以自己起的  request.js我们创建的是匿名函数，你起的这个名字会默认当作我创建的匿名函数
export const pageStudyInfo = (params) => {  //pageStudyInfo这个就是在模板里可以像函数哪样用的
	return request({         // pageStudyInfo这个是名字可以自己起  他接收一个params这个后面会说       
		url: 'wyymv',           //路径参数
		method: 'GET',           //请求方式
		data: {id:params},      // 我当前使用的接口是需要一个id为参数，所以我是这样写的。

        这个箭头函数接收的params传递给import request from '/utils/request/request.js'这里引入的request 方法
        // header: {} // 自定义  //这个目前还没接触到，是请求头。
	})
}

使用我们封装的接口

=====
<template>
	<view>
		<button @click="open(1)">获取</button>
		<button @click="open(2)">打印</button>
	</view>
</template>
<script setup>
import{pageStudyInfo} from'/utils/request/api.js'  这里导入我们的api文件
const data = {
  id:5430034,
}
const ids = {}
const open =(id)=>{      
	if( id == 1){
		pageStudyInfo (data).then((res) => {      //pageStudyInfo这里使用我们封装好的api  
		  console.log('成功', res.data.mv);       //(data).then((res)这个data会传到我们api.js里pageStudyInfo （params）接收的params   res 就是接口拿到的数据
		   ids.vlue =res.data           //这里可以赋值到我的定义的常数然后就可以在模板里使用了
		}).catch((err) => { 
		  console.error('失败', err);
		});
	}else if( id ==2){
		console.log(ids.vlue);
	}
}
</script>

下面是一些知识点