• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序封装request请求

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

为了减少代码量 以及方便后期的维护 ,把小程序中的request请求封装起来是很有用的

建一个和page同级的文件夹http

1.建立一个nev.js 文件 封装各个环境下的公共接口

  module.exports={
    //开发环境
    dev:{
      baseUrl:'http://127.0.0.1:8080'
    },
    //生产环境
    prod:{
      baseUrl:'https://api.it120.cc'
    },
    //测试环境
    test:{
      baseUrl:'https://api.1909A.com'
    }
  }

2.建立一个reque.js 文件 封装request核心ajax请求

  const { baseUrl } = require('./env.js').prod
  //封装ajax
  const vipUrl='专属域名'
  module.exports={
    request:function(url,method="GET",data={},isSubDomain=true) {
      let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl:''}/${url}`;
        //数据请求成功前的loading加载
       wx.showLoading({
         title: '玩命加载中',
       })
        //promise封装request
       return new Promise((resolve,reject)=>{
           wx.request({
             url: fullUrl,
             method,
             data,
             header:{
               'Content-type':'application/x-www-form-urlencoded'
             },
             success(res){
              // console.log('res::',res)
                 //数据请求成功判断
               if (res.statusCode===200 && res.data.code===0) {
                  resolve(res.data.data)
                  wx.hideLoading()
               }else {
                 wx.showToast({
                   title: '接口有问题,请检查',
                 })
                 reject('接口有问题,请检查')
               }
             },
             fail(error) {
               wx.showToast({
                 title: '数据接口有问题',
               })
               reject('数据接口有问题')
             }
           })
       })
    }
  }

3.建立api.js 封装各个接口

  const { request }=require('./request.js');

  //项目中用到的各种业务接口的封装

  module.exports={

    //商品分类接口
    goodsCate:()=> {

      return request('shop/goods/category/all','GET','',true)

    },
    //banner图接口
    getBanner:()=>{},
    //商品详情接口
    getDetail:(id)=>{

      return request('shop/goods/detail','GET',{id:id},true)
    },
    //其他接口....

  }

4.找一个一个需要接口的页面 在他对应的js 页面引入

  //通过结构赋值的方式~
  const { goodsCate, getDetail}=require('../..//http/api.js')
  Page({
        data:{
              desc:[]
        },
       onShow(e) {
          var that = this;
           goodsCate().then(res=>{
                 console.log('index.js中接收:',res)
             })
                //   let id=e.detail
            getDetail(395742).then(res=>{
                 console.log('商品详情:',res.content)
                 this.setData({
                      desc: res.content
                 })
              WxParse.wxParse('article', 'html', that.data.desc, that, 5);
          })
    })
小程序封装request请求和vue封装axios请求的思想其实是一样的 主要都是通过promise来实现的,网络请求是项目中必不可少的,其封装的思想一定要知道的!
每天一个小知识点,一点一点的成长,加油!

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
mpvue从一无所有开始仿大众点评小程序发布时间:2022-07-18
下一篇:
小程序获取form_id与小程序获取openid发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap