一般我们https请求都是通过wx.request来请求,但是这种请求如果多了,页面会混乱不说,还不好管理,因此我将请求单独拎出去,方便管理,也方便后期维护。
// api.js
const API_BASE_URL = 'http://xxx';
const request = (url, data) => {
let _url = API_BASE_URL + url;
return new Promise((resolve, reject) => {
wx.request({
url: _url,
method: "get",
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(request) {
resolve(request.data) },
fail(error) {
reject(error)
}
})
});
} module.exports ={
gethotsongs:(data) =>{
return request('/search/hot',data)//热搜接口
},
searchSuggest:(data)=>{
return request('/search/suggest',data)//搜索建议接口
},
searchResult:(data)=>{
return request('/search',data)//搜索结果接口
},
getBanner:(data)=>{
return request('/banner',data)//个性推荐轮播
},
getsongsheet:(data)=>{
return request('/top/playlist',data)//热门歌单接口
},
getNewSong:(data)=>{
return request('/personalized/newsong',data)//最新音乐接口
},
getDjRadios:(data)=>{
return request('/dj/recommend',data)//电台推荐接口
},
getProgramRecommend:(data)=>{
return request('/program/recommend',data)//推荐节目接口
},
getRecommendType:(data)=>{
return request('/dj/recommend/type',data)//所有电台分类推荐
},
getRecommendMV:(data)=>{
return request('/personalized/mv',data)//推荐MV
},
getNewMv:(data)=>{
return request('/mv/first',data)//最新MV
},
getNewEst:(data)=>{
return request('/album/newest',data)//最新专辑
},
getTopList:(data)=>{
return request('/top/list',data)//排行榜
},
getDjList:(data)=>{
return request('/dj/catelist',data) //电台分类
},
getPay:(data)=>{
return request('/dj/paygift',data)//付费精品
},
getSonger:(data)=>{
return request('/toplist/artist',data)//歌手排行
}
}

只需要在使用的页面引入就好

const API = require('/config/api')

下面以个性推荐轮播图为例

  getBanner: function() {
API.getBanner({
type: 2
}).then(res => {
if (res.code === 200) { //更加严谨
this.setData({
banner: res.banners
})
}
})
}

参考链接:https://juejin.im/post/5d10c899f265da1bae390749

小程序封装API的更多相关文章

  1. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  2. 微信小程序封装storage(含错误处理)

    这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...

  3. 小程序常用API介绍

    小程序常用API接口  wx.request https网络请求 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method:"GET&qu ...

  4. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  5. 把微信小程序异步API转为Promise,简化异步编程

    把微信小程序异步API转化为Promise.用Promise处理异步操作有多方便,谁用谁知道. 微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层 ...

  6. 微信小程序 HTTP API

    微信小程序 HTTP API promise API https://www.npmtrends.com/node-fetch-vs-got-vs-axios-vs-superagent node-f ...

  7. 小程序封装request请求,统一API

    程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API ...

  8. 微信小程序请求API接口PHPSESSID变化的解决方式

    微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.reque ...

  9. 微信小程序 封装请求

    在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...

随机推荐

  1. mysql8 Could not retrieve transation read-only status server

    想回顾下ssm,看着网上别的帖子手动搭了一个,一直报Could not retrieve transation read-only status server , java.sql.SQLExcept ...

  2. SpringBoot 集成FreeMarker

    SpringBoot官方不推荐使用jsp,因为jsp不好发挥SpringBoot的特性.官方推荐使用模板引擎代替jsp,现在很多公司都使用FreeMarker来作为SpringBoot的视图. Spr ...

  3. ubutun18 install ibus-pinyin

    ref: https://www.cnblogs.com/asmer-stone/p/9069866.html Step1 $ sudo apt-get install ibus-pinyin

  4. 笔记||Pyhton3进阶之多线程原理

    # 多线程 # 一个进程相当于一个或多个线程 # 当没有多线程编程时,一个进程也是一个主线程 # 但有多线程编程时,一个进程包含多个线程,包括主线程 # 使用线程 可以实现程序的并发 # python ...

  5. 如何创建Github账号及将本地项目上传至GitHub?

    如何将本地项目上传至GitHub 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直 ...

  6. Linux命令:cp命令

    cp命令作用:拷贝文件和目录 一.格式 cp [OPTION]... [-T] SOURCE DEST cp [OPTION]... SOURCE... DIRECTORY cp [OPTION].. ...

  7. 通过CrawlSpider对招聘网站进行整站爬取(拉勾网实战)

    爬虫首先要明确自己要爬取的网站以及内容 进入拉勾网的网站然后看看想要爬取什么内容职位,薪资,城市,经验要求学历要求,全职或者兼职职位诱惑,职位描述提取公司的名称 以及 在拉勾网的url等等 然后在na ...

  8. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  9. C# 篇基础知识10——多线程

    1.线程的概念 单核CPU的计算机中,一个时刻只能执行一条指令,操作系统以“时间片轮转”的方式实现多个程序“同时”运行.操作系统以进程(Process)的方式运行应用程序,进程不但包括应用程序的指令流 ...

  10. MVC5仓库管理系统

    下载