简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
首頁 > 微信小程式 > 小程式開發 > 主體

原生小程式如何封裝請求，優雅地呼叫介面？

青灯夜游
發布： 2021-12-02 10:26:42
轉載
2758 人瀏覽過

微信小程式如何封裝原生請求？如何呼叫介面？以下這篇文章跟大家介紹一下原生微信小程式封裝請求，並優雅地呼叫介面的方法，希望對大家有幫助！

原生小程式如何封裝請求，優雅地呼叫介面？

本文屬於程式碼片段，對於原生微信小程式請求的封裝。有個人書寫習慣，僅供參考。

基於小程式原生request封裝Promise風格的請求
避免多層回呼(回呼地獄)
對於網路請求錯誤統一處理分發

目錄結構

.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── env.js // 环境配置
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...
登入後複製

相關程式碼

設定檔

env.js

// env.js
module.exports = {
  ENV: 'production',
  // ENV: 'test'
}
登入後複製

statusCode.js

// statusCode.js
// 配置一些常见的请求状态码
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,// 项目接口地址，支持多域名
}
登入後複製

主函數

請注意 64~68行是對token過期的處理,在呼叫登入的時候, 檢查app.globalData中是否存在token,存在則不發起登入請求,token過期清空token,那麼下一次請求的時候就會重新發起登入請求從而會重新取得到新的token

// 引入状态码statusCode
const statusCode = require('./statusCode')
// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL
const { BASEURL } = require('./config')
// 定义默认参数
const defaultOptions = {
  data: {},
  ignoreToken: false,
  form: false,
}
/**
 * 发送请求
 * @params
 * method:  请求方式: POST/GET
 * url:  请求路径
 * data:  请求参数
 * ignoreToken:  是否忽略token验证
 * form:  是否使用formData请求
 */
function request (options) {
  let _options = Object.assign(defaultOptions, options)
  let { method, url, data, ignoreToken, form } = _options
  const app = getApp()
  // 设置请求头
  let header = {}
  if (form) {
    header = {
      'content-type': 'application/x-www-form-urlencoded'
    }
  } else {
    header = {
      'content-type': 'application/json' //自定义请求头信息
    }
  }
  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) {
            // 统一处理请求错误
            showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
          resolve(res.data)
        } else if (code === statusCode.EXPIRE) {
          app.globalData.token = ''
          showToast(`登录过期, 请重新刷新页面`)
          reject(res.data)
        } else {
          showToast(`请求错误${url}, CODE: ${code}`)
          reject(res.data)
        }
      },
      fail: (err) => {
        console.log('%c err', 'color: red;font-weight: bold', err)
        showToast(err.errMsg)
        reject(err)
      }
    })
  })
}

// 封装toast函数
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(介面分發統一處理,防止介面寫到同一個檔案下過於冗長)
目錄結構如下:
.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── index.js  // 统一处理入口
│   ├── order.js  // 订单接口
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...
登入後複製
引入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 })
  }
}
登入後複製
統一分發介面
const orderApi = require("./order")

module.exports = {
  orderApi
}
登入後複製
頁面引用
const { orderApi } = require('dir/path/api/index')
...
1. `Promise.then()`链式调用
func () {
  orderApi.apiName(params).then(res => {
    // do Something
  }).catch(err => {
    // do Something
  })
}

2. `async/await` 调用
async func () {
  try {
    let res = await orderApi.apiName(params)
    // do Something
  } catch (err) {
    // do Something
  }
}
登入後複製
options取值

##請求程式ignoreToken請求是否攜帶tokenform是否是表單請求



參數
#說明
資料類型
預設值





#url
介面名稱
 #String
''




data
Object 

{}





Boolean 

false





Boolean

false





#【相關學習推薦：
小程式開發教學】
以上是原生小程式如何封裝請求，優雅地呼叫介面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
                
            
            

                                

                    相關標籤：
                    

                        小程式 呼叫介面                    

                

                                
來源：juejin.cn

                            

            

                                    
                        上一篇：淺析小程式中reLaunch跳轉報錯怎麼解決
                    
                                    
                        下一篇：手把手教你怎麼部署微信小程式並上線
                    
                            

            

                
                
本網站聲明

                
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

            

           

            

                
作者最新文章

                
            

            

                
最新問題

                

                                        

                        

                            Vue專案中未定義模組
                            我剛剛通過運行npmini tvue@latest創建了一個新的Vue應用程序，如官方文件中指定的那樣。然後我嘗試按照Vue和Vite網站上的指南將Tailwind添加到我的應用程...
                            

                                

                                     來自於 2023-11-17 12:38:53
                                

                                

                                    
  0 

                                    
2

                                    
394

                                

                            

                        

                    

                    

                                        

                        

                            如何解決問題：'無法載入資源：net::ERR_CONNECTION_REFUSED http://localhost:8989/route?.....”
                            我的程式有問題。這是一個關於地理資訊系統的程序，使用了LeatlefJs函式庫，我還使用了letlef路由機功能。問題是系統無法顯示它應該能夠顯示的路線，我不太明白。這是腳本。 f...
                            

                                

                                     來自於 2023-11-12 19:34:27
                                

                                

                                    
  0 

                                    
1

                                    
244

                                

                            

                        

                    

                    

                                        

                        

                            NextJS 中應用程式路由器中pages/_app.js 的替代方案是什麼？
                            我剛開始使用NextJS，有一個名為應用程式路由器的新路由器。現在我有一些使用NextJS頁面路由器中的pages/_app.js的教學。那麼，應用路由器中對應的檔案是什麼？
                            

                                

                                     來自於 2023-11-11 09:38:14
                                

                                

                                    
  0 

                                    
1

                                    
395

                                

                            

                        

                    

                    

                                        

                        

                            在 PHP 中利用 VueJS 元件
                            我想混合由Php和VueJS元件產生的基本HTML，而不必一直使用VueJS到最低的dom葉子。父佈局應用了Vue應用程序，所有標頭、導航、旁注等都是Vue元件，大多數頁面上的主要...
                            

                                

                                     來自於 2023-11-11 00:01:44
                                

                                

                                    
  0 

                                    
2

                                    
288

                                

                            

                        

                    

                    

                                        

                        

                            為什麼當流參數設定為false時，OpenAI Chat GPT (GPT-3.5) API沒有回應？
                            您可以在下面的我的應用程式中看到$prompt值。當我輸入此提示值時，chat GPT不會給出結果。但這是因為參數中的"stream"=>false。如果...
                            

                                

                                     來自於 2023-11-10 18:39:06
                                

                                

                                    
  0 

                                    
1

                                    
338

                                

                            

                        

                    

                    

                                    

            

            

                

                    
相關專題

                    更多>
                    
                

                

                    
                

            

        
    
    

        

            
熱門推薦

            

                
            

        

        

            

                
熱門教學

                更多>
                
            

            

                

                    
相關教學 

                    
熱門推薦

                    
最新課程

                

                
                
                
            

            
        


        

            

                
最新下載

                更多>
                
            

                        
            

                

                    
網站特效 

                    
網站源碼

                    
網站素材

                    
前端模板

                

                
                
                
                
            

            
        

    




    

        

            

                

                    

                        關於我們
                        免責聲明
                        Sitemap
                        

                    

                    
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！