zoukankan      html  css  js  c++  java
  • 小程序封装request请求

    为了减少代码量 以及方便后期的维护 ,把小程序中的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来实现的,网络请求是项目中必不可少的,其封装的思想一定要知道的!
    每天一个小知识点,一点一点的成长,加油!
  • 相关阅读:
    [基础规范]JavaBeans规范
    leetcode 114.Flatten Binary Tree to Linked List (将二叉树转换链表) 解题思路和方法
    sql 分组取每组的前n条或每组的n%(百分之n)的数据
    D3js-API介绍【中】
    微信公众平台开发 一 账号类别与申请
    Apple Swift编程语言新手教程
    iOS中xib与storyboard原理,与Android界面布局的异同
    Scala入门到精通——第十五节 Case Class与模式匹配(二)
    使用IDA破解TraceMe.exe
    21行python代码实现拼写检查器
  • 原文地址:https://www.cnblogs.com/mxnl/p/13472023.html
Copyright © 2011-2022 走看看