大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

微信小程序如何封装常用的API接口请求及工具类

这篇“微信小程序如何封装常用的API接口请求及工具类”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序如何封装常用的API接口请求及工具类”文章吧。

十年的阿克塞哈萨克族自治网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整阿克塞哈萨克族自治建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“阿克塞哈萨克族自治网站设计”,“阿克塞哈萨克族自治网站推广”以来,每个客户项目都认真落实执行。

工具类封装:

// 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,    

  })  

}

// 显示模态对话框

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

// 开发环境url 

export const dev = {

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

};

// 测试环境url

export const test = {

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

};

// 线上环境url

export const prod = {

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

};

// 封装实例

// request.js

// 引入二次封装的组件

import {

  Toast,

  Loading,

  Modal

} from './utils.js'

// 引入config中的url(后面点什么就是 什么环境)

 const {

  baseUrl

} = require('./config')。dev  //这里用的是ES6的写法

module.exports = {

  // 二次封装wx.request

  request: (url, method, data) => {

    //url: 为网络接口后面要拼接的动态路径

    //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) => {     //根据公司业务需求做出调整

                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统一封装接口

// 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接口请求及工具类”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页标题:微信小程序如何封装常用的API接口请求及工具类
标题来源:http://dzwzjz.com/article/igiejp.html
在线咨询
服务热线
服务热线:028-86922220
TOP