本篇內(nèi)容介紹了“js原生小程序怎么封裝請(qǐng)求優(yōu)雅地調(diào)用接口”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比新田網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式新田網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋新田地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

基于小程序原生request封裝Promise風(fēng)格的請(qǐng)求
避免多級(jí)回調(diào)(回調(diào)地獄)
對(duì)于網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤統(tǒng)一處理分發(fā)

目錄結(jié)構(gòu)

.
├── api
│   ├── config.js // 相關(guān)請(qǐng)求的配置項(xiàng),請(qǐng)求api等
│   ├── env.js // 環(huán)境配置
│   ├── request.js  // 封裝主函數(shù)
│   ├── statusCode.js // 狀態(tài)碼
└── ...

相關(guān)代碼

配置文件

env.js

// env.js
module.exports = {
  ENV: 'production',
  // ENV: 'test'
}

statusCode.js

// statusCode.js
// 配置一些常見(jiàn)的請(qǐng)求狀態(tài)碼
module.exports = {
  SUCCESS: 200,
  EXPIRE: 403
}

config.js

// config.js
const { ENV } = require('./env')
let BASEURL

switch (ENV) {
  case 'production':
    BASEURL = ''
    break
  case 'test':
    BASEURL = ''
    break
  default:
    BASEURL = ''
    break
}
module.exports = {
  BASEURL,// 項(xiàng)目接口地址，支持多域名
}

主函數(shù)

注意 64~68行是對(duì)token過(guò)期的處理,在調(diào)用登錄的時(shí)候, 檢查app.globalData中是否存在token,存在則不發(fā)起登錄請(qǐng)求,token過(guò)期清空token,那么下一次請(qǐng)求的時(shí)候就會(huì) 重新發(fā)起登錄請(qǐng)求從而會(huì)重新獲取到新的token

// 引入狀態(tài)碼statusCode
const statusCode = require('./statusCode')
// 定義請(qǐng)求路徑, BASEURL: 普通請(qǐng)求API; CBASEURL: 中臺(tái)API,不使用中臺(tái)可不引入CBASEURL
const { BASEURL } = require('./config')
// 定義默認(rèn)參數(shù)
const defaultOptions = {
  data: {},
  ignoreToken: false,
  form: false,
}
/**
 * 發(fā)送請(qǐng)求
 * @params
 * method: <String> 請(qǐng)求方式: POST/GET
 * url: <String> 請(qǐng)求路徑
 * data: <Object> 請(qǐng)求參數(shù)
 * ignoreToken: <Boolean> 是否忽略token驗(yàn)證
 * form: <Boolean> 是否使用formData請(qǐng)求
 */
function request (options) {
  let _options = Object.assign(defaultOptions, options)
  let { method, url, data, ignoreToken, form } = _options
  const app = getApp()
  // 設(shè)置請(qǐng)求頭
  let header = {}
  if (form) {
    header = {
      'content-type': 'application/x-www-form-urlencoded'
    }
  } else {
    header = {
      'content-type': 'application/json' //自定義請(qǐng)求頭信息
    }
  }
  if (!ignoreToken) {
    // 從全局變量中獲取token
    let token = app.globalData.token
    header.Authorization = `Bearer ${token}`
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASEURL + url,
      data,
      header,
      method,
      success: (res) => {
        let { statusCode: code } = res
        if (code === statusCode.SUCCESS) {
          if (res.data.code !== 0) {
            // 統(tǒng)一處理請(qǐng)求錯(cuò)誤
            showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
          resolve(res.data)
        } else if (code === statusCode.EXPIRE) {
          app.globalData.token = ''
          showToast(`登錄過(guò)期, 請(qǐng)重新刷新頁(yè)面`)
          reject(res.data)
        } else {
          showToast(`請(qǐng)求錯(cuò)誤${url}, CODE: ${code}`)
          reject(res.data)
        }
      },
      fail: (err) => {
        console.log('%c err', 'color: red;font-weight: bold', err)
        showToast(err.errMsg)
        reject(err)
      }
    })
  })
}

// 封裝toast函數(shù)
function showToast (title, icon='none', duration=2500, mask=false) {
  wx.showToast({
    title: title || '',
    icon,
    duration,
    mask
  });
}

function get (options) {
  return request({
    method: 'GET',
    ...options
  })
}

function post (options) {
  // url, data = {}, ignoreToken, form
  return request({
    method: 'POST',
    ...options
  })
}

module.exports = {
  request, get, post
}

使用方法

新建文件

新建api文件(此處以訂單接口為例), 新建api/index.js(接口分發(fā)統(tǒng)一處理,防止接口寫到同一個(gè)文件下過(guò)于冗長(zhǎng))
目錄結(jié)構(gòu)如下:

.
├── api
│   ├── config.js // 相關(guān)請(qǐng)求的配置項(xiàng),請(qǐng)求api等
│   ├── index.js  // 統(tǒng)一處理入口
│   ├── order.js  // 訂單接口
│   ├── request.js  // 封裝主函數(shù)
│   ├── statusCode.js // 狀態(tài)碼
└── ...

引入request

// order.js
const request = require('./request')

module.exports = {
  // data可以傳入 url, data, ignoreToken, form, cToken
  apiName (data) {
    let url = 'apiUrl'
    return request.post({ url, data })
  }
}

統(tǒng)一分發(fā)接口

const orderApi = require("./order")

module.exports = {
  orderApi
}

頁(yè)面引用

const { orderApi } = require('dir/path/api/index')
...
1. `Promise.then()`鏈?zhǔn)秸{(diào)用
func () {
  orderApi.apiName(params).then(res => {
    // do Something
  }).catch(err => {
    // do Something
  })
}

2. `async/await` 調(diào)用
async func () {
  try {
    let res = await orderApi.apiName(params)
    // do Something
  } catch (err) {
    // do Something
  }
}

options取值

參數(shù)	說(shuō)明	數(shù)據(jù)類型	默認(rèn)值
url	接口名	String	''
data	請(qǐng)求體	Object	{}
ignoreToken	請(qǐng)求是否攜帶token	Boolean	false
form	是否是表單請(qǐng)求	Boolean	false

“js原生小程序怎么封裝請(qǐng)求優(yōu)雅地調(diào)用接口”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享標(biāo)題：js原生小程序怎么封裝請(qǐng)求優(yōu)雅地調(diào)用接口
當(dāng)前地址：http://www.chinadenli.net/article30/jiihpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站建設(shè)、微信公眾號(hào)、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)