基于Taro开发小程序笔记--03项目API处理

一、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处理

上一篇:我的第一个上线小程序,案例实战篇一


下一篇:微信分享API,踩过的坑,记录一下。