在實際開發中,前端需要跟後端約定HTTP請求頭,這就需要對wx.request進行簡單的封裝
-
首先在util工具文件夾下新建ajax.js
其中內容: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) {} }) } -
頁面引用
首先在需要使用的頁面引入該js文件const { myAjax } = require('../../util/ajax.js')然後調用該公用方法
myAjax('getList', 'POST', { id: 3 }, (data) => { // 返回數據後的邏輯 })題外話:
由於無論在哪個頁面發現未登錄都需要即時登錄,所以還需要個公共登錄的方法 - 首先在util工具文件夾下新建public.js
然後引入剛才封裝的公共請求方法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();
}
})
}
})
}
}
})
}