博客 / 詳情

返回

微信小程序wx.request的簡單封裝

在實際開發中,前端需要跟後端約定HTTP請求頭,這就需要對wx.request進行簡單的封裝

  1. 首先在util工具文件夾下新建ajax.js
    image.png
    其中內容:

    export const myAjax = (url,method,param,cb) => {
    
      let baseUrl = 'https://dev.xxxx.com:8090/'; 
     // 請求地址,8090是跟後端約定好的端口號
    
      let header = {
     "sessionCode": wx.getStorageSync("sessionCode"),
     "content-type": "application/json"
      }
    
      if(url == 'login' || url == 'register'){
     header = { "content-type": "application/json" }
     // 登錄和註冊的時候,不用在header裏傳sessionCode
      }
    
      wx.request({
     url: baseUrl + url,
     method,
     data: param,
     header,
     dataType: 'json',
     success: function (res) {
       
       if( res.data.code == 200 ){
         // 返回正確回調
         cb(res.data);
       }else{
         if(res.data.code == -1){
           // 無論在哪個頁面未登錄,都使用公共登錄方法
           publicLogin(()=>{
             // 公共登錄回調
             myAjaxPost(url,param,cb);
           });
    
         }else{
           // 提示彈框
           wx.showModal({
             title: '提示!',
             confirmText: '確定',
             showCancel: false,
             content: res.data.msg ?? '',
             success: (res) => {
               if (res.confirm) {
                   
               }
             }
           })
         }
         
       }
     },
     fail: function (err) {}
    })
    }
  2. 頁面引用
    首先在需要使用的頁面引入該js文件

    const { myAjax } = require('../../util/ajax.js')

    然後調用該公用方法

     myAjax('getList', 'POST', { id: 3 }, (data) => {
         // 返回數據後的邏輯
     })

    題外話:
    由於無論在哪個頁面發現未登錄都需要即時登錄,所以還需要個公共登錄的方法

  3. 首先在util工具文件夾下新建public.js
    image.png
    然後引入剛才封裝的公共請求方法myAjax,因為登錄成功了,還要自動執行剛才提示“尚未登錄”的那個接口
    import { myAjax } from './ajax.js'
    公共登錄方法如下:
export const publicLogin = (cb) => {

  wx.login({ // 跟後端約定好了傳wx.login返回的code給他,這裏請根據業務需要
    success(res) {
      if (res.code) {
        let params = {
          loginToken: res.code,
        }
        myAjax('login', 'POST' params, async (res) => {
          if (res.sessionCode) {
            // 登錄成功
            cb();
          } else {
            // 登錄失敗,先去註冊,註冊之前,先獲取手機號授權,
            // 而小程序官方規定手機號的授權必須用特定open-type的button
            // DOM組件的渲染必須依託.wxml文件,所以這裏直接跳到註冊頁
            wx.navigateTo({
              url: '/pages/register/index',
              success: function (e) {
                var page = getCurrentPages().pop();
                if (page == undefined || page == null) return;
                // 在註冊展示的時候,出現授權手機號的button
                page.onShow();
              }
            })

          }

        })

      }
    }
  })

}
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.