微信小程序封装数据请求API接口
那什么是api呢？
API：Application Programming Interface，应用程序编程接口
那为什么要封装API接口呢？
因为本身就是一出现是一大段，自然如果不封包起来通过调用的方式进行整理的话，直接放到网站
源码中，自然就会加大的源码的体积，而且还会影响到代码的美现。而且现在很多的杀来毒软件都
把JS代码误报为病毒，况源且JS代码外露也很容易让不良分子找到攻击网站的参照物。
API接口封装的好处：
1、提高网站的打开速度。
2、符合SEO搜索引擎思路。
3、以便于我们后期的维护，如果当我们的接口发生更改的时候，我们修改也很方便，
不需要再一个页面的查找
所以，对于提高网站访问zhidao速度，最好把JS代码封包起来，而且还要通过ROBOT文件把之屏
蔽掉，毕竟这些都是搜索引挚不能识别的，外放对于提高收录只有坏外没有好处，所以，为了收录
为了访问速度能封装的JS代码就尽时封装。
那小程序怎么封装接口呢？接下来我们搞一下：
我们先在小程序里面创建一个目录 嗯 ~ ~ ~，就叫http吧！
我们先创建一个公共目录吧：里面设置公共访问的url，及地址环境
在http目录下面创建env.js
//commonJs预览 --- node.js采用的就是该规范
//什么是common.js规范:每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、
//函数、类，都是私有的，对其他文件不可见。
//这里使用的接口呢都是自己模拟的，亲么可以根据自己的需求进行添加
module.exports={
//开发环境的url
dev:{
baseUrl:"http://localhost:3000"
},
//测试环境url
test:{
baseUrl:"http://www.test.com"
},
//线上环境url
prod:{
baseUrl:'https://api.it120.cc'
}
}
继续在http目录下面创建一个request.js文件来二次封装wx.request
// 引入env中的url
const { baseUrl } = require('./env.js').prod;
//在这里添加我们的专业域名
const subDomain = 'xxx';
/*
*二次封装wx.request
*
*/
module.exports = {
/**
* 二次封装wx.request
* {String }url:请求的接口地址
* {String} method:请求方式 GET,POST....
* {Object} data:要传递的参数
* { boolean }isSubDomain:表示是否添加二级子域名 true代表添加, false代表不添加
*/
request: (url, method, data, isSubDomain) => {
console.log('这是我封装的ajax请求', baseUrl);
//这里使用ES6的写法拼接的字符串
let _url = `${baseUrl}/${isSubDomain ? subDomain: '' }${url}`;
console.log(_url);
return new Promise((resolve, reject) => {
wx.showLoading({
title: '正在加载',
});
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
console.log('从接口获取到的数据', res);
let { code } = res.data;
if(code===0) {
resolve(res.data);
wx.hideLoading();
}else {
wx.showToast({
title: '数据请求错误',
})
}
},
fail() {
reject('接口有误，请检查')
}
});
});
},
}
http目录下面在创建一个api.js文件来封装我们的reuest请求
//引入封装的reuest请求
const { request } = require('./request.js')
//基于业务封装的接口
module.exports={
/* 轮播图 */
banners:()=>{
return request(','GET',{},true);
},
/* 封装商品列表的方法 */
getGoodsList:()=>{
return request('要请求的路径','请求方式|GET|POST',{要携带的参数},是否添加子域名 |true|false);
},
/* 添加商品收藏 */
addGoodsFav: (goodsId, token)=>{
return request('要请求的路径', 'POST', { goodsId:goodsId, token:token},true);
},
/* 获取商品的分类 */
getGoodsCate:()=>{
return request('要请求的路径','GET',{},true);
}
}
然后再需要的js页面引入就ok了!
const { getGoodsList } = require('../../http/api.js')
//定义一个点击事件来测试我们请求的接口
onbBn() {
// getGoodsList();
// addGoodsFav();
// getGoodsCate()
console.log('这是我们要测试的接口',getGoodsCate());
//请求后抛出
banners().then(res => {
console.log('终于等到你',res);
})