当我照着视频学习网易云项目时,发现相对来讲接口对接过于繁琐。
这和公司日常看到的项目接口一比较,显得就很不方便。
当然,以下的对接只是相对简化了一下,实际上,还存在着不少需要完善的,比如说,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() } }); }) }