{//学习心得//}uni-app：调取接口【方法】与【实例】

目录

　　前言

　　uni.request相关参数说明

　　　　OBJECT参数说明

　　　　method 有效值

　　　　success 返回参数说明

　　　　data 数据说明

　　uni.request()

　　uni.request({}).then()

　　async/await

　　封装

　　小技巧

　　总结

---

前言

这是作者本人在校内学习了uni-app项目的开发，取出了其中比较重要的调取接口的学习心得，希望这些知识点能让各位读者在搭建项目的过程中能够熟练运用调取接口。

API接口（应用编程接口 application/programming接口），准许应用程序通过定义的接口标准来访问另一个应用程序或服务的编程方式。简单来说，API就是两个软件或系统之间的通信语言或接口。

通过API接口来获取商品数据可以简化开发难度，提高数据获取效率，获取更多更全面的数据，同时提高系统的可靠性。这种方式已经成为现代软件开发的标配，并且正在得到越来越广泛的应用。

uni.request是uni-app框架提供的网络请求API，用于前端向服务端发送请求获取数据，实现前后端交互。

uni.request()相关参数说明

OBJECT参数说明

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	支付宝小程序不支持
sslVerify	Boolean	否	true	验证 ssl 证书	仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentials	Boolean	否	false	跨域请求时是否携带凭证（cookies）	仅H5支持（HBuilderX 2.6.15+）
firstIpv4	Boolean	否	false	DNS解析时优先使用ipv4	仅 App-Android 支持 (HBuilderX 2.8.0+)
enableHttp2	Boolean	否	false	开启 http2	微信小程序
enableQuic	Boolean	否	false	开启 quic	微信小程序
enableCache	Boolean	否	false	开启 cache	微信小程序、抖音小程序 2.31.0+
enableHttpDNS	Boolean	否	false	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS	微信小程序
httpDNSServiceId	String	否		HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS	微信小程序
enableChunked	Boolean	否	false	开启 transfer-encoding chunked	微信小程序
forceCellularNetwork	Boolean	否	false	wifi下使用移动网络发送请求	微信小程序
enableCookie	Boolean	否	false	开启后可在headers中编辑cookie	支付宝小程序 10.2.33+
cloudCache	Object/Boolean	否	false	是否开启云加速（详见云加速服务）	百度小程序 3.310.11+
defer	Boolean	否	false	控制当前请求是否延时至首屏内容渲染后发送	百度小程序 3.310.11+
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

 method 有效值

method	App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	快手小程序	京东小程序
GET	√	√	√	√	√	√	√	√
POST	√	√	√	√	√	√	√	√
PUT	√	√	√	x	√	√	x	x
DELETE	√	√	√	x	√	x	x	x
CONNECT	x	√	√	x	x	x	x	x
HEAD	√	√	√	x	√	x	x	x
OPTIONS	√	√	√	x	√	x	x	x
TRACE	x	√	√	x	x	x	x	x

 success 返回参数说明

参数	类型	说明
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header
cookies	Array.<string>	开发者服务器返回的 cookies，格式为字符串数组

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

 

 

 

uni.request()

实例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

返回值

如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个。例如：

var requestTask = uni.request({
	url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
	complete: ()=> {}
});
requestTask.abort();

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装

通过 requestTask，可中断请求任务。

requestTask 对象的方法列表

方法	参数	说明
abort		中断请求任务
offHeadersReceived		取消监听 HTTP Response Header 事件，仅微信小程序平台支持，文档详情
onHeadersReceived		监听 HTTP Response Header 事件。会比请求完成事件更早，仅微信小程序平台支持，文档详情

实例 

const requestTask = uni.request({
	url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
	data: {
        name: 'name',
        age: 18
	},
	success: function(res) {
		console.log(res.data);
	}
});

// 中断请求任务
requestTask.abort();

uni.request({}).then()

uni.request({
	url:'https://www.example.com/request',
	method:'get',
}).then((result)=>{
	let [error,res] = result;
	//result将返回一个数组[error,{NativeData}]
	//NativeData：调取接口后返回的原生数据
	if(res.statusCode === 200){
		this.carouselData = res.data
	}
	if(res.statusCode === 404){
		console.log('请求的接口没有找到');
	}

 async/await

1. async：用在函数定义的前面

2. async request(){ //函数体;}

3. await：用在标明了async关键字的函数内部，异步操作的前面

async request(){
		let result = await uni.request({
			url:'https://www.example.com/request'
		})
		console.log(result)
		let [err,res] = result;
		if(res.statusCode === 200){
			this.carouselData = res.data;
		}
	}

封装

在项目新建目录utils文件夹，在文件夹下创建http.js,编写封装代码

// export default class Request {
export default function http(param) {
	// 请求参数
	var url = param.url,
		method = param.method || 'get',
		header = param.header || {},
		data = param.data || {},
		token = param.token || "",
		hideLoading = param.hideLoading || false;

	//拼接完整请求地址
	const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'
	var requestUrl = baseUrl + url;

	//请求方式:GET或POST(POST需配置
	// header: {'content-type' : "application/x-www-form-urlencoded"},)
	if (method) {
		method = method.toUpperCase(); //小写改为大写
		if (method == "POST") {
			header = {
				'content-type': "application/x-www-form-urlencoded"
			};
		} else {
			header = {
				'content-type': "application/json"
			};
		}
	}

	//加载圈
	if (!hideLoading) {
		uni.showLoading({
			title: '加载中...'
		});
	}

	// 返回promise
	return new Promise((resolve, reject) => {
			// 请求
			uni.request({
					url: requestUrl,
					data: data,
					method: method,
					header: header,
					success: (res) => {
						// 判断 请求api 格式是否正确
						if (res.statusCode && res.statusCode != 200) {
							uni.showToast({
								title: "api错误" + res.errMsg,
								icon: 'none'
							});
							return;
						}
						// code判断:200成功,不等于200错误
						if (res.data.meta.status) {
							if (res.data.meta.status != '200') {
								uni.showToast({
									title: "" + res.data.msg,
									icon: 'none'
								});
								return;
							}
						}					
					// 将结果抛出
					resolve(res.data)
				},
				//请求失败
				fail: (e) => {
					uni.showToast({
						title: "" + e.data.msg,
						icon: 'none'
					});
					reject(e.data);
				},
				//请求完成
				complete() {
					//隐藏加载
					if (!hideLoading) {
						uni.hideLoading();
					}
					// resolve();
					return;
				}
			})
	})
}
// }

进入main.js文件引用http.js文件

import request from 'utils/https.js';
Vue.prototype.$Https=https;

 封装后的代码

async getSwiperList(){
				const res = await this.$Https({
					url:'/home/swiperdata'
				});
				console.log(res);
				this.swiperlist=res.message;
			}

getSwiperList(){
				 this.$Https({
				 	url:'/home/swiperdata'
				 })
				 .then((res) => {
				 	console.log(res);
				 	this.swiperlist=res.message;
				 })
			},

小技巧

• 请求的 header 中 content-type 默认为 application/json。
• 避免在 header 中使用中文，或者使用 encodeURIComponent 进行编码，否则在百度小程序报错。（来自：快狗打车前端团队）
• 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
• H5 端本地调试需注意跨域问题，参考：调试跨域问题解决方案
• 注意由于百度小程序iOS客户端，请求失败时会进入fail回调，需要针对百度增加相应的处理以解决该问题。
• 注意小程序端不支持自动保持 cookie，服务器应避免验证 cookie。如果服务器无法修改，也可以使用一些模拟手段，比如这样的工具GitHub - charleslo1/weapp-cookie: 一行代码让微信、头条、百度、支付宝小程序支持 cookie，兼容 uni-app 🍪🚀 One line of code allows weapp to support cookie（wx weixin wxapp cookie） 可以请求时带上 cookie 并将响应的 cookie 保存在本地。
• H5端 cookie 受跨域限制（和平时开发网站时一样），旧版的 uni.request 未支持 withCredentials 配置，可以直接使用 xhr 对象或者其他类库。
• 根据 W3C 规范，H5 端无法获取 response header 中 Set-Cookie、Set-Cookie2 这2个字段，对于跨域请求，允许获取的 response header 字段只限于“simple response header”和“Access-Control-Expose-Headers”（详情）
• uni-app 插件市场有flyio、axios等三方封装的拦截器可用
• 低版本手机自身不支持 ipv6，如果服务器仅允许 ipv6，会导致老手机无法正常运行或访问速度非常慢
• localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
• debug 模式，安卓端暂时无法获取响应头，url中含有非法字符（如未编码为%20的空格）时会请求失败
• iOS App第一次安装启动后，会弹出是否允许联网的询问框，在用户点击同意前，调用联网API会失败。请注意判断这种情况。比如官方提供的新闻模板示例（HBuilderX新建项目可选择），会判断如果无法联网，则提供一个错误页，提示用户设置网络及下拉刷新重试。
• 良好体验的App，还会判断当前是否处于飞行模式（参考）、是wifi还是3G（参考）
• 部分安卓设备，真机运行或debug模式下的网速，低于release模式很多。
• 使用一些比较小众的证书机构（如：CFCA OV OCA）签发的 ssl 证书在安卓设备请求会失败，因为这些机构的根证书不在系统内置根证书库，可以更换其他常见机构签发的证书（如：Let's Encrypt），或者配置 sslVerify 为 false 关闭 ssl 证书验证（不推荐）。
• 离线打包不支持 sslVerify 配置
• 单次网络请求数据量建议控制在50K以下（仅指json数据，不含图片），过多数据应分页获取，以提升应用体验。

总结

本人写的这篇博客总结了在学习uni-app课上的调取接口方式，希望读者能够掌握如何在uni-app开发过程熟练运用调取接口，这在以后的项目开发中会频繁使用。通过API接口来获取商品数据可以简化开发难度，提高数据获取效率，获取更多更全面的数据，同时提高系统的可靠性。这种方式已经成为现代软件开发的标配，并且正在得到越来越广泛的应用。