WeChatアプレットインターフェイスの2次カプセル化

主なアイデア:
ここに画像の説明を挿入
インターフェースのスプライシング実現する:「固定インターフェース」スプライシングと「フリーインターフェース」スプライシングに
分割インターフェーススプライシングを実現する方法:3つのスプライシングに分割:
1。env.jsを作成し、独自のデフォルトインターフェースアドレスを記述します他の環境を構成するためのいくつかのインターフェースを定義します。
例:baseUrl: "https://api.it120.cc"
2. request.jsを作成し、独自のデフォルト構成のいくつかを設定できます。
例:const subName = '
自由に設定して、要求のタイプを確認します。'let_url = ${baseUrl}/${isDoMain?subName:''}${url}
3.インターフェイス内のステッチの前にapiインターフェイスを作成し、インターフェイスを会社のアドレスに追加します。このファイルで渡されたパラメータを受け入れることができます。
例: //商品リスト
getList:()=> { return request( "/ shop / goods / list"、 ""、{}、true)}、メインコードは次のとおりです:env.js



module.exports={
   //开发环境url
   dev:{
    baseUrl:"http://localhost:3000"
  },
  //测试环境得url
  test:{
    baseUrl:"http://www.test.com"
  },
  // 线上环境url
  prod:{
    baseUrl:"https://api.it120.cc"
  }
}

request.js

const {baseUrl} = require("./env").prod
const subName = '随意配置的'
module.exports={
  request:(url,method="GET",data={},isDoMain)=>{
    wx.showLoading()
    let _url = `${baseUrl}/${isDoMain?subName:''}${url}`
    return new Promise((resolve,reject)=>{   
      wx.request({
        url: _url,
        data:data,
        method:method,
        header:{
          'content-type':'application/x-www-form-urlencoded'
        },
        success:res=>{      
          let {code} = res.data           
           if(code===0||code===700){
             resolve(res);
             wx.hideLoading()
           }else{
             wx.showToast({
               title: '请先登录',
               icon:'none'
             })        
          }
        },
        fail:res=>{
          reject('接口有误请检查')
        }
      })
    })
  }
}

api.js構成インターフェースのメインファイル

const {request} = require("./request")
module.exports={
  // 商品列表
   getList:()=>{
      return request("/shop/goods/list","",{},true)
    },
    // 详情页
  getDetail:(id)=>{
    return request("/shop/goods/detail","",{id},true)  // 需要传递参数的
  },
  }

電話する方法は?

const {getList,getDetaill} = require("../../http/api")

使い方?

getList().then((res)=>{
       console.log(res.data.data)   // 获取的数据
      this.setData({
           list:res.data.data
       })   // 把获取到的数据进行更新
     })

人参?
例:let token = wx.getStorageSync( 'token')
getList(token).then((res)=> {})
メソッドを呼び出すときにパラメーターを渡し、api.jsファイルで受け入れます。

おすすめ

転載: blog.csdn.net/lqlq54321/article/details/106911615