Taro request 請求封裝

在根目錄下創建service文件夾

再創建 baseUrl文件 寫入請求地址

const getBaseUrl = (url) => {
  let BASE_URL = '';
  if (process.env.NODE_ENV === 'development') {
    //開發環境 - 根據請求不同返回不同的BASE_URL
BASE_URL = 'https://*********'
  } else {
    // 生產環境

BASE_URL = 'https://*********'
   
  }
  return BASE_URL
}

export default getBaseUrl;

　創建config.js文件寫入常用狀態碼

export const HTTP_STATUS = {
  SUCCESS: 200,
  CREATED: 201,
  ACCEPTED: 202,
  CLIENT_ERROR: 400,
  AUTHENTICATE: 401,
  FORBIDDEN: 403,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
  BAD_GATEWAY: 502,
  SERVICE_UNAVAILABLE: 503,
  GATEWAY_TIMEOUT: 504
}

　　創建http文件寫入邏輯

import Taro from '@tarojs/taro'
import getBaseUrl from './baseUrl'
import interceptors from './interceptors'
 
interceptors.forEach(interceptorItem => Taro.addInterceptor(interceptorItem))
 
class httpRequest {
   
  baseOptions(params, method = "GET") {
    let { url, data,param } = params;
    const BASE_URL = getBaseUrl(url);
    // let contentType = "application/x-www-form-urlencoded";
    let contentType = "application/json;charset=UTF-8";
    contentType = params.contentType || contentType;
    const option = {
      url: BASE_URL + url,  //地址
      data: data,   //傳參
      method: method, //請求方式
      timeout:50000, // 超時時間
      header: {  //請求頭
        'content-type': contentType,      
        'Authorization':Taro.getStorageSync('Authorization')
      }
    };
    return Taro.request(option);
  }
 
  get(url, data = "",param) {
    let option = { url, data,param };
    return this.baseOptions(option);
  }
 
  post(url, data,param, contentType) {
    let params = { url, data,param, contentType };
    return this.baseOptions(params, "POST");
  }
 
  put(url, data = "") {
    let option = { url, data };
    return this.baseOptions(option, "PUT");
  }
 
  delete(url, data = "") {
    let option = { url, data };
    return this.baseOptions(option, "DELETE");
  }
 
}
 
export default new httpRequest()

　　

　　再創建interceptors文件 寫入異常顯示邏輯

import Taro from "@tarojs/taro"
import { pageToLogin } from "./utils"
import { HTTP_STATUS } from './config'

const customInterceptor = (chain) => {

  const requestParams = chain.requestParams
  Taro.showLoading({
    title: '加載中',
  })
  return chain.proceed(requestParams).then(res => {
    Taro.hideLoading()
    // 只要請求成功，不管返回什么狀態碼，都走這個回調
    if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
      return Promise.reject({ desc: '請求資源不存在' })

    } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
      return Promise.reject({ desc: "服務端出現了問題" })

    } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
      Taro.setStorageSync("Authorization", "")
      pageToLogin()
      // TODO 根據自身業務修改
      return Promise.reject({ desc: "沒有權限訪問" });

    } else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) {
      Taro.setStorageSync("Authorization", "")
      pageToLogin()
      return Promise.reject({ desc: "需要鑒權" })

    } else if (res.statusCode === HTTP_STATUS.SERVER_ERROR) {
      return Promise.reject({ desc: "服務器錯誤" });
    } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
      if (res.data.code === 0) {
        return res.data
      } else if (res.data.code == '-100') {
        //非法登錄
        pageToLogin()
      }
      else {
        return Promise.reject(res.data)
      }
    }
  }).catch(error=> {
    Taro.hideLoading()
    console.error(error)
    return Promise.reject(error)
  })
}

// Taro 提供了兩個內置攔截器
// logInterceptor - 用於打印請求的相關信息
// timeoutInterceptor - 在請求超時時拋出錯誤。
// const interceptors = [customInterceptor, Taro.interceptors.logInterceptor]
const interceptors = [customInterceptor]

export default interceptors

　　創建utils文件 寫入處理異常狀態方法

import Taro from "@tarojs/taro";
/**
 * @description 獲取當前頁url
 */
export const getCurrentPageUrl = () => {
  let pages = Taro.getCurrentPages()
  let currentPage = pages[pages.length - 1]
  let url = currentPage.route
  return url
}

export const pageToLogin = () => {
  let path = getCurrentPageUrl()
  Taro.clearStorage()
  if (!path.includes('login')) {
    Taro.reLaunch({
      url: "/pages/login/login"
    });
  }
}

　　最后創建 servers文件進行api注冊

import HTTPREQUEST from "./http"

export const getLogin = (data) => {
  return HTTPREQUEST.post('/api/login/login', data)
}

　　最后在頁面引入就可以了