前端封装后端接口,并在页面进行调用

首先,创建一个单独的JS文件进行封装,在JS里面可以对接口的基础地址(前缀)进行二次封装,封装完接口前缀后记得在main.js里面导入,不然无法生效,基础地址封装后可以对POST请求公共项进行封装,用时只需...进行展开

封装POST请求

封装GET请求

在页面中调用

代码如下:

/* 对服务器端API及访问技术进行二次封装 */
//服务器基础地址
export let host = 'http://192.168.2.201:8081/'

//POST请求公共选项 --- 仅供当前模块内部使用
let postOptions={
    method:'POST',
    header:{
        // 'Content-Type':'application/x-www-form-urlencoded'
        'Content-Type':'none'
    }
}
/**
 * API1 商品列表
 * 接口地址：guiji/getStoreCommodityList
 * 请求方式：POST
 * 请求示例：{{host}}/f/api/guiji/getStoreCommodityList?guiJiCode=G340101002&pageSize=10&pageNo=1
**/
export let StoreCommodityList = async (pageNo=1,pageSize=10,guiJiCode='G340101002')=>{ //此处的形参指定了"默认值"
    let url = host + `f/api/guiji/getStoreCommodityList?guiJiCode=${guiJiCode}&pageSize=${pageSize}&pageNo=${pageNo}`
    //发起请求前:显示"加载中"提示框
    uni.showLoading({
        title:'商品加载中...'
    })
    //发起异步请求
    let [err,res] = await uni.request({ 
        ...postOptions,
        url,
        data:{pageNo,pageSize,guiJiCode}
    })
    //请求结束后:隐藏"加载中"提示框
    uni.hideLoading()
    //返回请求主体
    if (res) {
            return res.data;
        }
    if (err) {
        uni.showToast({
            title: res.data.message,
            icon: 'none',
            mask: true,
            duration: 2000
        });
    }
}

/**
 * API2 获取柜机信息
 * 接口地址：guiji/getGuiji
 * 请求方式：get
 * 请求示例：{{host}}/f/api/guiji/getGuiji?guiJiCode=G1000002
**/
export let Guiji = async (guiJiCode='G1000002')=>{ //此处的形参指定了"默认值"
    // let url = host + `data/product/list.php?pno=${pno}&kw=${kw}`
    let url = host + 'f/api/guiji/getGuiji?guiJiCode='+guiJiCode
    //发起请求前:显示"加载中"提示框
    uni.showLoading({
        title:'商品加载中...'
    })
    //发起异步请求
    let [err,res] = await uni.request({ 
        url,
    })
    //请求结束后:隐藏"加载中"提示框
    uni.hideLoading()
    //返回请求主体
    if (res) {
            return res.data;
        }
    if (err) {
        uni.showToast({
            title: res.data.message,
            icon: 'none',
            mask: true,
            duration: 2000
        });
    }
}

<script>
    //导入数据API的二次封装模块
    import { Guiji, NewsList, StoreCommodityList } from '../../../servies'
    export default {
        data() {
            return {
                // cosUrl: this.cosUrl,
                // title: 'product-list',
                terminalGoodsList: [],
                terminal:{},
                NewsList:[],
                // deviceId: "",
                // terminal: {
                //     deviceId:'TS526W',     //设备ID
                //     name:'派客购测试设备',   //设备名字
                //     location:'派客购大厦',   //位置定位
                //     notice:'免费。'          //公告语
                // },
                options: [],
                buttonGroup: [{
                    text: '开门选取商品',
                    backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
                    color: '#fff'
                }],
                // pageNo: 1,
                // pageSize: 10,
                // guiJiCode:'G340101002',
                loadMoreStatus: "loading",
                // totalPage: 0,
                // renderImage: true,
                text: '',
            };
        },
        async onLoad(){
            let that = this
            let news=''
            let data = await StoreCommodityList()
            // console.log('1',data);
            that.terminalGoodsList = data.data
            let data1 = await Guiji()
            // console.log('2',data1);
            that.terminal = data1.data
            let data2 = await NewsList()
            console.log(data2);
            that.NewsList = data2.data
            
            for(var item in that.NewsList){
                console.log('item1',item);
                let news = that.NewsList[item]
                console.log('item2',news.summary);  
                that.text += ' ' + news.summary
                console.log("text3",that.text);
            }
            
            
        },
        methods:{
            
        },
    };
</script>