微信小程序的api封装思路和电商项目的登录思路

最新推荐文章于 2021-04-10 13:45:03 发布

G_XUI

最新推荐文章于 2021-04-10 13:45:03 发布

阅读量235

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/G_XUI/article/details/107888192

版权

一、微信小程序的api封装思路

总体分为三大块

环境地址的统一

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

业务数据的请求的方法统一

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

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

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

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

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

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

}

请求的封装

//request.js 针对wx.requeste的二次封装
const { baseUrl } = require('./env.js').prod
//封装ajax

const vipUrl = 'hjl'

module.exports = {

  request: function (url, method = "GET", data = {}, isSubDomain = true) {

    let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${url}`;

    wx.showLoading({
      title: '玩命加载中',
    })


    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('数据接口有问题')

        }
      })


    })


  }



}