1. 程式人生 > >基於Taro開發小程序筆記--03項目API處理

基於Taro開發小程序筆記--03項目API處理

更改 用戶 -- base 全局 sco session eject 攔截

一、baseUrl.js根據項目環境切換請求地址

if(process.env.NODE_ENV==‘development‘){
  var baseUrl = ‘https://dev/uat.com‘      //本地地址、測試地址
}else{
  var baseUrl = ‘https://prod.com‘          //生產環境地址
}

export default baseUrl

二、interceptor.js全局請求攔截處理

import Taro from ‘@tarojs/taro‘;

let Ajax = (url, method, data, header) => {
  
// 請求攔截處理寫在這裏 Taro.showLoading({ title: ‘加載中‘, icon: ‘loading‘, mask: true }); return new Promise((resolve, reject) => { Taro.request({ url: url, data: data, method: method, header: header, success: (res) => { // 響應攔截處理寫在這裏 if (res.statusCode == 200) {
// 確認用戶登錄,而不僅僅是有sessionId,還需要有登錄的信息用戶openId let loginData = Taro.getStorageSync(‘loginData‘); if(loginData){ loginData = JSON.parse(loginData) } if(!loginData.openId){ Taro.showModal({ title:‘提示‘, content:
‘請進行登錄。‘, success:(res)=>{ if(res.confirm){ Taro.clearStorageSync(); Taro.reLaunch({ url:‘/subPages1/pages/login/login‘ }); return; } } }) } return resolve(res); } else if (res.statusCode == 404) { Toast(‘404 請求頁面不存在‘); } else if (res.statusCode == 408) { Toast(‘請求超時‘); } else if (res.statusCode == 500) { Toast(‘服務器錯誤‘) } else if (res.statusCode == 0) { Toast(‘網絡連接超時‘) } else if (res.statusCode == 501) { Taro.showModal({ title:‘提示‘, content:‘請進行登錄。‘, success:(res)=>{ if(res.confirm){ Taro.clearStorageSync(); Taro.reLaunch({ url:‘/subPages1/pages/login/login‘ }); return; } } }) } reject(res); }, fail: (error) => { Model(‘服務器錯誤,請稍候再試 !‘); reject(error); return; }, complete: () => { Taro.hideLoading(); } }) }) }
//將sessionId通過請求頭傳遞給後臺,用於判斷是否登錄以及登錄是否過期超時 let get
= (url, data, header) => { header = header ? header : {"Cookie": "JSESSIONID=" + Taro.getStorageSync("sessionId")}; return Ajax(url, ‘GET‘, data, header); } let post = (url, data, header) => { header = header ? header : {"Cookie": "JSESSIONID=" + Taro.getStorageSync("sessionId")}; header[‘Content-Type‘] = ‘application/json‘; return Ajax(url, ‘POST‘, data, header); } let Toast = (msg) => { Taro.showToast({ title: msg, duration: 3000, icon: ‘none‘, mask:true }) } let Model = (msg) => { Taro.showModal({ title: ‘提示‘, content: msg, showCancel: false }) } export default {get, post}

三、api.js項目所有的請求方法處理

import http from ‘./interceptor.js‘
import baseUrl from ‘./baseUrl.js‘

export default {
  getContact(params) {
    return http.get(baseUrl + ‘/api/xxx‘, {params})
  },
  getLogin(params) {
    return http.post(baseUrl + ‘/api/xxx‘, parasm)
  }
...... }

四、在頁面中調用請求方法

 import api from "../../../api/api";

 api.getContact(params).then((res) => {
            if (res.data.code == 200) {
           } else {
           }
  })

總結:請求的統一處理,方便以後更改請求地址,並且可以方便的切換開發和生產地址。

全局請求統一攔截,處理控制登錄過期超時之外,還便於日後對登錄權限的控制。

基於Taro開發小程序筆記--03項目API處理