uni-app超详细的api接口调用方法（Vue3）

 

什么是 api ?

API（应用程序编程接口）是一组定义的规则，旨在使不同的应用程序能够相互通信，简化软件开发和创新过程。它允许一个软件程序向另一个软件程序传输数据，从而避免重复工作。

用大白话理解就是一个项目，前端需要数据，通过写好的接口，从后端拿数据，展示到前端来。解决数据交互的问题的。【自我理解】

免费的api接口

 教书先生API - 提供免费接口调用平台 

一个很棒的接口收录网站，站长已经帮我们收录了大概47个api 接口

本文以Bing每日一图为例

uni-app怎么调用接口数据？【有三种调用方式】

在学习调用接口时需要了解的常识：

1. 什么是异步请求？

答：在uni-app中，异步操作的理解和处理是开发中的一个重要方面。异步编程允许程序在等待某些操作完成时不会阻塞主线程，从而提高程序的响应性和性能。

第一种是最普通，常见的（缺点：不能解决异步请求）

uni.request({
      url:'',        //请求的地址，类型为String
      data:'',      //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后
      method:'',    //get、post、delete
      header:{},    //请求头的信息
      success:res=>{}, //请求成功回调，带参数
      fail:()=>{},  //请求失败
      complete:=>{} //要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）
    })

实例代码(见底部完整代码)

uni.request({
		url: 'https://api.oioweb.cn/api/bing',
		success: res => {
			// console.log(res);
			imgs.value = res.data.result;
		},
		fail: err => {
			console.log("请求超时");
			console.log(err); 
		},
		complete: () => { //无论成功都会调用
			uni.hideLoading()
		}
	})

第二种是利用ES6的Promise对象来解决异步请求

uni.request({
      url:'',      //请求的地址，类型为String
      data:'',     //要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后         
      method:'',   //get、post、delete
      header:{}    //请求头的信息
    }).then((result)=>{
      //result将返回一个数组[error,{NativeData}]，NativeData调取接口后返回的原生数据
    })

示例代码

uni.request({
url:'https://api.oioweb.cn/api/bing',
}).then(result=>{
//result是一个包含两个元素的数组,第一个是错误对象error,第二个是response响应对象
//使用 数组解构赋值 来从result对象中提取两个值到err和res两个变量中
let [err,res]=result;
if(res.stat0usCode===200){
   imgs.value = res.data.result;
   console.log("imgs.value");
};
if(res.statusCode===404){
   console.log("请求的接口没有找到");
  }
})

第三种是  async/await ES6 解决异步请求 （终极解决方法）“异步同步化“”

function async request(){
	let result=await uni.request({
	   url:'https://api.oioweb.cn/api/bing',
	})
	let [err,res]=result;
	if(res.statusCode===200){
	   imgs.value = res.data.result;
	   console.log("imgs.value");
	}
  }
},

解释

async 关键字表示这个函数会返回一个 Promise 对象；

使用 await 关键字等待 uni.request 方法的完成；

怎么使用api接口？

注意他返回的数据的结构，有些接口不是直接使用下面的就能获取的

imgs.value = res.data.result;

它是在data里的result中的

 完整代码【仅供参考】

<template>
	<view class="h1">Bing Picture</view>
	<view class="container">
		<view class="row" v-for="item in imgs" :key="item.date">
			<view class="title">标题：{{item.title}}</view>
			<view class="image">
				<image :src="item.url" mode="" @click="goToImage(item)"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	let imgs = ref([])

	uni.showLoading()
	uni.request({
		url: 'https://api.oioweb.cn/api/bing',
		timeout: 10000,
		success: res => {
			// console.log(res);
			imgs.value = res.data.result;
		},
		fail: err => {
			console.log("请求超时");
			console.log(err); 
		},
		complete: () => { //无论成功都会调用
			uni.hideLoading()
		}
	})
	
	//点击图片预览
	function goToImage(item) {
	  uni.previewImage({
	    urls: [item.url], // 图片列表数组
	    current: item.url, // 当前显示图片的链接，默认是urls的第一个
		longPressActions:{
			itemList: ['发送给朋友', '保存图片', '收藏'],
		},
	    success() {
	      console.log(item.url +'\n预览成功');
	    },
	    fail(err) {
	      console.log('预览失败', err);
	    }
	  });
	}
	
</script>

<style lang="scss">
	.h1 {
		width: 100%;
		height: 80rpx;
		font-size: 45rpx;
		line-height: 80rpx;
		color: white;
		text-align: center;
		font-weight: bold;
		background: #666;
	}

	.container {
		padding: 30rpx;
		font-size: 14px;
		line-height: 24px;

		.row {
			.title {
				text-align: left;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 50rpx;
				margin-bottom: 20rpx;
			}

			.image {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 30rpx;
				.content {
					font-size: 28rpx;
					color: #666;
				}
			}

		}
	}
</style>

运行截图

如果文章对你有用，还望点个赞支持一下！谢谢