微信小程序如何封裝常用的API接口請(qǐng)求及工具類(lèi)

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

工具類(lèi)封裝：

// utils.js

// 顯示消息提示框

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

  wx.showToast（{

    title: title,

    icon: type,

    duration: time,

    mask: isshow  

  }）

}

// 顯示 loading 提示框。需主動(dòng)調(diào)用 wx.hideLoading 才能關(guān)閉提示框

export function Loading（title）{

  wx.showLoading（{

    title: title,    

  }）  

}

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

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請(qǐng)求的封裝：

新建一個(gè)network文件夾，里面包含api.js request.js config.js 三個(gè)文件（根據(jù)自己需求來(lái)）

// config.js

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

export const dev = {

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

};

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

export const test = {

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

};

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

export const prod = {

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

};

// 封裝實(shí)例

// request.js

// 引入二次封裝的組件

import {

  Toast,

  Loading,

  Modal

} from './utils.js'

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

 const {

  baseUrl

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

module.exports = {

  // 二次封裝wx.request

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

    //url： 為網(wǎng)絡(luò)接口后面要拼接的動(dòng)態(tài)路徑

    //method: 為請(qǐng)求方式

    //data: 為要傳遞的參數(shù) object類(lèi)型

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

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

         //設(shè)置請(qǐng)求頭

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

      //檢查緩存中有沒(méi)有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（'數(shù)據(jù)請(qǐng)求錯(cuò)誤', 'error', 1000）

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

             wx.hideLoading（）;

           }

        },

        fail: （err） => {

          reject（err）

        } */

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

                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） { 

                    //沒(méi)有登錄轉(zhuǎn)跳到登錄頁(yè)面

                    wx.reLaunch（{

                        url: '/pages/login/index'

                    }）

                }else{   

                    Toast（'請(qǐng)求失敗，請(qǐng)稍后重試'）;

                }

            }

      }）

    }）

  }

}

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

// api.js

// 導(dǎo)入封裝好的實(shí)例

import {request} from './request'

export function login（data） => {

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

  },

頁(yè)面使用

// 導(dǎo)入封裝好的接口

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

// 調(diào)用 

login（）。then（）。catch（）  

以上就是關(guān)于“微信小程序如何封裝常用的API接口請(qǐng)求及工具類(lèi)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。