前言:为了请求接口维护起来比较方便,所以我们程序员就通常把请求地址封装到一个文件里面
1.首先我们要在utils文件里面创建一个config.js,当然也可以新建一个文件夹,所以看你们的习惯咯,只要路径引入对就好了。
1)config.js文件主要是配置请求地址(域名)
//这里使用的接口呢都是自己模拟的,亲么可以根据自己的需求进行添加 module.exports = { //开发环境的url dev: { baseUrl: "https://api.gdzhenglu.com" }, //测试环境url test: { baseUrl: "http://www.test.com" }, //线上环境url prod: { baseUrl: \'https://api.it120.cc\' } }
-
在utils文件里面创建一个request.js,封装reques请求,引入config中的url(后面点什么就是 什么环境)
(1) 后面点什么就是(线上,测试等)环境const {baseUrl} = require(\'./config.js\').dev;
(2) 二次封装wx.request
// 引入config中的url后面点什么就是 什么环境 const {baseUrl} = require(\'./config.js\').dev; //在这里添加我们的专业域名(二级域名) const subDomain = \'https://api.gdzhenglu.com\'; /* *二次封装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(\'接口有误,请检查\') } }); }); }, }
3. 在utils文件里面创建一个api.js,封装所有的接口路径,
(1) 引入封装的reuest请求const {request} = require(\'./request.js\')
//引入封装的reuest请求 const { request } = require(\'./request.js\') //基于业务封装的接口 module.exports = { /* 轮播图 */ banners: () => { return request(\'banner_list\', \'GET\', {}, false); }, neworder: () => { let data = { num: 3 } return request(\'all_new_order\', \'GET\', {data}, false); } /* 封装商品列表的方法 */ // getGoodsList:()=>{ // return request(\'要请求的路径\',\'请求方式|GET|POST\',{要携带的参数},是否添加子域名 |true|false); // }, /* 添加商品收藏 */ // addGoodsFav: (goodsId, token)=>{ // return request(\'要请求的路径\', \'POST\', { goodsId:goodsId, token:token},true); // }, /* 获取商品的分类 */ // getGoodsCate:()=>{ // return request(\'要请求的路径\',\'GET\',{},true); // } }
4. 在index.js页面引用
(1)在这个页面要要用到api.js那边的几个方法就引用几个方法
//在这个页面要要用到api.js那边的几个方法就引用几个方法 const { banners, neworder } = require(\'../../utils/api.js\')
(2) 在index页面的使用
// pages/httpName/httpName.js //在这个页面要要用到api.js那边的几个方法就引用几个方法 const { banners, neworder } = require(\'../../utils/api.js\') var app = getApp(); Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.banners(); this.getNeworder(); }, //轮播接口的使用 banners() { banners().then(res => { console.log(\'终于等到你\', res); }) }, // 最新下单者 getNeworder() { neworder().then(res => { console.log(\'终于等到你\', res); }).catch(err => { console.log(err) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
转自:https://mp.weixin.qq.com/s?src=11×tamp=1622123199&ver=3094&signature=BmvOlDKDYXYFdYxUwgXdU7fwvgWbeQgm*tI8SQaLPw-rKmtlwNyagcow8P8pfwhsx48bI-QEC8MEJY02nr9eTmmfA-wEBRGv4G8Sd1nMY-*Rw6*AJO-d8ulOheUI--dw&new=1
//引入封装的reuest请求
const {
request
} = require(\'./request.js\')
//基于业务封装的接口
module.exports = {
/* 轮播图 */
banners: () => {
return request(\'banner_list\', \'GET\', {}, false);
},
neworder: () => {
let data = {
num: 3
}
return request(\'all_new_order\', \'GET\', {data}, false);
}
/* 封装商品列表的方法 */
// getGoodsList:()=>{
// return request(\'要请求的路径\',\'请求方式|GET|POST\',{要携带的参数},是否添加子域名 |true|false);
// },
/* 添加商品收藏 */
// addGoodsFav: (goodsId, token)=>{
// return request(\'要请求的路径\', \'POST\', { goodsId:goodsId, token:token},true);
// },
/* 获取商品的分类 */
// getGoodsCate:()=>{
// return request(\'要请求的路径\',\'GET\',{},true);
// }
}
请发表评论