相对简略的接口封装（前端）

当我照着视频学习网易云项目时，发现相对来讲接口对接过于繁琐。

这和公司日常看到的项目接口一比较，显得就很不方便。

当然，以下的对接只是相对简化了一下，实际上，还存在着不少需要完善的，比如说，token啊之类的，没有写对应方法

创建公有文件夹 common

1.创建一个文件 config.js   //放置公共接口前缀

export const baseurl='http://localhost:3000' ;

2.创建一个文件 api.js      //放置常用的接口

import { baseurl } from '@/common/config.js'    //引用公共接口前缀

import { apiResquest } from '@/common/apiResquest.js'  //引用为接口写好的方法

// 歌单搜索页
export const topList = (param) => {
    return apiResquest({
        url: baseurl + "/toplist/detail",
        method: 'GET',
        params: {
            ...param
        }
    })
}

3.创建一个文件  apiResquest.js  //写接口方法

export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
	console.log('接口的请求参数,prams',prams)
	// 判断请求类型
	let headerData = {
		'content-type': 'application/json'
	}
 
	let dataObj = null
        //因为我们的GET和POST请求结构不同这里我们做处理，大家根据自己后台接口所需结构灵活做调整吧
	if (prams.method === "GET") {
		// headerData = {
		// 	'content-type': 'application/json',
		// 	'token': uni.getStorageSync('token')
		// }
	} else {
		// dataObj = {
		// 	'data': prams.query,
		// 	'token': uni.getStorageSync('token')
		// }
	}
	return new Promise((resolve, reject) => {
		// console.log('base_url',base_url)
		let url = prams.url; //请求的网络地址和局地的api地址组合
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		return uni.request({
			url: url,
			data: dataObj,
			method: prams.method,
			// header: headerData,
			success: (res) => {
				uni.hideLoading()
				console.log('看下成功没',res)
                //这里是成功的返回码，大家根据自己的实际情况调整
				if (res.data.code !== 200) {
					uni.showToast({
						title: '获取数据失败:' + res.data.msg,
						duration: 1000,
						icon: "none"
					})
					return;
				}
				resolve(res.data);
			},
			fail: (err) => {
				reject(err);
				console.log(err)
				uni.hideLoading()
			},
			complete: () => {
				console.log('请求完成')
				uni.hideLoading()
			}
		});
	})
}