uni-app编写音乐播放器小程序（2）

数据接口封装

1.新建request文件夹，在文件夹下面创建api.js和index.js

2.封装index.js，这里使用Promise封装

配置接口路径

const config = {
	path:"http://www.codeman.ink:3000"
}

直接贴代码

//请求封装
export default (path, data = {}, method = "GET", loading)=>{
	//1.获取缓存中的token
	const token = uni.getStorageSync("token");
	//2.判断token是否存在 ，存在就加到Authorization里面，不存在就置为空
	const Authorization = token ? token : ""
	//3.判断loading 
	if(loading){
		uni.showLoading({
			title:"加载中...",
			mask:true
		})
	}
	return new Promise((resolve,reject)=>{
		uni.request({
			header:{
				'Content-Type':'application/x-www-form-urlencoded' //解决跨域问题
			},
			url:config.path + path,
			method:method,
			data:data,
			success(response){
				//code判断
				
				//返回数据
				resolve(response.data)
			},
			//失败后返回
			fail(err){
				uni.showToast({
					icon:"error",
					title:"服务器响应失败",
				})
				console.error(err);
				reject(err);
			},
			complete(){
				// 关闭loading
				uni.hideLoading();
			}
		})
	})
}

这一步写完后接下来就写api.js,先写一个轮播图的接口进行测试

 import request from "@/request/index.js"

export default {
	 // 轮播图
	 getBanner(){
		return request("/banner?type=1")
	 },
	 
 }

然后我们在页面中调用测试一下，看通不通

我们在index.vue中写一段测试下

<script setup>
//引入request
import api from "@/request/api.js"

import{onMounted}from 'vue'

onMounted(()=>{
  getData();
})

function getData(){
    api.getBanner().then((res) => {
			console.log(res)
		})

}
</script>

然后我们就可以在浏览器中获取到对应的值啦