微信小程序如何封裝常用的API接口請求及工具類

這篇“微信小程序如何封裝常用的API接口請求及工具類”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序如何封裝常用的API接口請求及工具類”文章吧。

十年的阿克塞哈薩克族自治網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網站建設的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整阿克塞哈薩克族自治建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯從事“阿克塞哈薩克族自治網站設計”,“阿克塞哈薩克族自治網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

工具類封裝：

// utils.js

// 顯示消息提示框

export function Toast（title,type,time,isshow）{

  wx.showToast（{

    title: title,

    icon: type,

    duration: time,

    mask: isshow  

  }）

}

// 顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框

export function Loading（title）{

  wx.showLoading（{

    title: title,    

  }）  

}

// 顯示模態(tài)對話框

export function Modal（title,content） {

  return new Promise（（resolve,reject）=>{

    wx.showModal（{

      title: title,

      content: content,

       success: function（res） {

        if（res.confirm） {

          resolve（res.confirm）

        } else if（res.cancel） {

          resolve（res.cancel）

        }

      },

      fail: reject

    }）

  }）  

}

接口request請求的封裝：

新建一個network文件夾，里面包含api.js request.js config.js 三個文件（根據自己需求來）

// config.js

// 開發(fā)環(huán)境url 

export const dev = {

   baseUrl: "http://192.168.0.1:8080/jeecg-boot",

};

// 測試環(huán)境url

export const test = {

  baseUrl: "http://www.xxx.com"

};

// 線上環(huán)境url

export const prod = {

  baseUrl: 'https://www.xxx.com'

};

// 封裝實例

// request.js

// 引入二次封裝的組件

import {

  Toast,

  Loading,

  Modal

} from './utils.js'

// 引入config中的url（后面點什么就是 什么環(huán)境）

 const {

  baseUrl

} = require（'./config'）。dev  //這里用的是ES6的寫法

module.exports = {

  // 二次封裝wx.request

  request: （url, method, data） => {

    //url： 為網絡接口后面要拼接的動態(tài)路徑

    //method: 為請求方式

    //data: 為要傳遞的參數 object類型

     let _url = ——${baseUrl}/${url}—— //子域名按需添加

    // let _url = ——${baseUrl}${son}/${url}——

         //設置請求頭

      var header = {'content-type': 'application/json'}

      //檢查緩存中有沒有token

      var token = wx.getStorageSync（'token'）

      if（token != ''） {

        //  header.Authorization = token;

        header['X-Access-Token'] = token;   // 鍵由后端定義

      }

    return new Promise（（resolve, reject） => {

      Loading（'正在加載中'）

      wx.request（{

        url: _url,

        data: data,

        method: method,

        header: header,

       /* success: （res） => {

           if （res.data.code == 200） {

             resolve（res）

             wx.hideLoading（）;

           } else {

             Toast（'數據請求錯誤', 'error', 1000）

            //  console.log（'操作失誤：',res）;

             wx.hideLoading（）;

           }

        },

        fail: （err） => {

          reject（err）

        } */

complete: （res） => {     //根據公司業(yè)務需求做出調整

                wx.hideLoading（）

                if（res.statusCode==200）{

                    if（res.data.status）{

                        resolve（res.data.data）

                    }else{

                        Toast（res.data.msg）

                        reject（res.data.data）

                    }

                }else if （res.statusCode === 401） { 

                    //沒有登錄轉跳到登錄頁面

                    wx.reLaunch（{

                        url: '/pages/login/index'

                    }）

                }else{   

                    Toast（'請求失敗，請稍后重試'）;

                }

            }

      }）

    }）

  }

}

API統(tǒng)一封裝接口

// api.js

// 導入封裝好的實例

import {request} from './request'

export function login（data） => {

    return request（'/appletslogin/appletsLogin/login', 'post', data）;

  },

頁面使用

// 導入封裝好的接口

import {login} from './network/api'

// 調用 

login（）。then（）。catch（）  

以上就是關于“微信小程序如何封裝常用的API接口請求及工具類”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯行業(yè)資訊頻道。

文章題目：微信小程序如何封裝常用的API接口請求及工具類
文章轉載：http://bm7419.com/article28/igiejp.html

成都網站建設公司_創(chuàng)新互聯，為您提供移動網站建設、全網營銷推廣、虛擬主機、定制網站、ChatGPT、微信小程序

廣告

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