微信小程序 封装http请求实例详解

微信小程序 封装http请求实例详解

简介

在微信小程序开发中,经常需要通过 HTTP 请求后端 API 来获取数据。为减少代码冗余并使功能模块化,我们可以将 HTTP 请求封装在可复用的模块中。减少重复代码的同时,也方便代码的维护和升级。

axios 库

针对HTTP请求处理,可以使用 axios 库,这是一个基于 Promise 的 HTTP 库,可运行在浏览器和 Node.js 适用于来自 API 的请求。
微信小程序中不能直接使用 axios 库,可以使用 mpvue-axios 库。

以下是 mpvue-axios 封装示例代码。

import axios from 'axios'
import qs from 'qs'
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = isProduction ? 'https://api.acme.com' : 'http://localhost:8000'

export default class Http {
  constructor() {
    this.axios = axios
    this.axios.defaults.baseURL = BASE_URL
    this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  }

    http(config = {}) {
    config.method = config.method || 'GET'
    switch(config.method.toUpperCase()) {
      case 'GET':
        return this.get(config.url, config.data)
      case 'POST':
        return this.post(config.url, config.data)
      case 'PUT':
        return this.put(config.url, config.data)
      case 'DELETE':
        return this.delete(config.url, config.data)
      default:
        return Promise.reject(new Error(`Invalid http method: ${config.method.toUpperCase()}`))
    }
  }

  get(url, params) {
    return this.axios.get(url, {params})
  }

  post(url, data) {
    return this.axios.post(url, qs.stringify(data))
  }

  put(url, data) {
    return this.axios.put(url, qs.stringify(data))
  }

  delete(url, data) {
    return this.axios.delete(url, {data: qs.stringify(data)})
  }
}

在构造器中赋值 axios.defaults.baseURL 为后台 API 请求的 URL。通过配置指定 Content-Type: application/x-www-form-urlencoded 来解决后端处理 POST 请求参数时出现的 415 Unsupported Media Type 错误.

使用方法如下:

const http = new Http()
http.http({
  url: '/user/123',
  method: 'GET',
  data: {
    name: 'Jack',
    age: '18',
  }
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.error(error)
})

小程序 API

小程序自带了一个基于 Promise 的网络请求 API — wx.request,可以使用它来进行网络请求。

以下是封装wx.request示例代码。

const BASE_URL = 'http://localhost:8000'

export default class Http {
  constructor() {
    this.BASE_URL = BASE_URL
  }

  http(config = {}) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.BASE_URL + config.url,
        method: config.method || 'GET',
        data: config.data || {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          resolve(res)
        },
        fail: function (error) {
          reject(error)
        }
      })
    })
  }
}

也可以通过类的静态方法 this.request 这种方式来进行请求。

const BASE_URL = 'http://localhost:8000'

export default class Http {
  constructor() {
    this.BASE_URL = BASE_URL
  }

  static request(config = {}) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: BASE_URL + config.url,
        method: config.method || 'GET',
        data: config.data || {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          resolve(res)
        },
        fail: function (error) {
          reject(error)
        }
      })
    })
  }
}

使用方法与 axios 类似:

const http = new Http()
http.http({
  url: '/user/123',
  method: 'GET',
  data: {
    name: 'Jack',
    age: '18',
  }
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.error(error)
})

结论

对于微信小程序的 HTTP 请求,我们可以通过封装 Axios / wx.request 来实现模块化、重用的思想。无论选择哪种方式实现,都需要注意在传递参数的过程中注意控制参数的格式,防止出现 415/400 等异常。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 封装http请求实例详解 - Python技术站

(0)
上一篇 2023年5月17日
下一篇 2023年5月17日

相关文章

  • Django bulk_create()、update()与数据库事务的效率对比分析

    当我们在Django中需要一次性创建或更新多条记录,我们可以使用bulk_create()和update()方法。但是,这两种方法的效率和数据的数量有关,并且还受到数据库事务的影响。 1. bulk_create()方法 bulk_create()方法是Django ORM中的快速创建多个模型实例的方式。它接收一个模型实例列表作为参数,并将它们保存到数据库中…

    云计算 2023年5月18日
    00
  • Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法

    下面就来详细讲解Linux下通过Python访问MySQL、Oracle、SQL Server数据库的方法,我们将从以下几个方面进行讲解: 安装Python库 连接MySQL数据库 连接Oracle数据库 连接SQL Server数据库 示例演示 一、安装Python库 在Python中访问MySQL、Oracle、SQL Server数据库时,需要相应的P…

    云计算 2023年5月18日
    00
  • 解密Elasticsearch:深入探究这款搜索和分析引擎

    作者:京东保险 管顺利 开篇 最近使用Elasticsearch实现画像系统,实现的dmp的数据中台能力。同时调研了竞品的架构选型。以及重温了redis原理等。特此做一次es的总结和回顾。网上没看到有人用Elasticsearch来完成画像的。我来做第一次尝试。 背景说完,我们先思考一件事,使用内存系统做数据库。他的优点是什么?他的痛点是什么? 一、原理 这…

    云计算 2023年5月6日
    00
  • 安全狗云中心客户端使用教程 让您安全无忧

    安全狗云中心客户端使用教程 安全狗云中心客户端是一款用于保护服务器安全的软件,可以实现实时监控、防火墙、入侵检测等功能。本文将详细介绍安全狗云中心客户端的使用教程,包括安装、配置和使用等方面。 1. 安装安全狗云中心客户端 安全狗云中心客户端支持多种操作系统,包括Windows、Linux、Mac等。用户可以根据自己的需求选择相应的版本进行安装。 Windo…

    云计算 2023年5月16日
    00
  • 云计算入门,友盟用户增长

    云栖号在线课堂,及时了解行业动态!阿里云推出疫情专题方案,为企业业务护航,让你足不出户了解行业动态。 在这里可以走近阿里云基础产品,了解更多应用方案,还能遇见大咖分享洞见及故事!也可以通过视频的形式让你高效、生动的了解场景化的上云最佳实践。   本周重磅直播   采购季直播间 – 7大会场攻略 -> 云计算入门系列课程 日期 直播主题 直播间link …

    2023年4月10日
    00
  • 云计算Tengine学习-IP访问控制

    云计算Tengine学习-IP访问控制IP访问控制可以限制一些IP访问的你nginx服务器,相当于禁止他们访问,deny all 是禁止所以IP访问,allow IP 是允许所设定的IP访问,不设置相当于所以IP都可以访问,这里演示禁止自己访问nginx服务器 编辑配置文件 在server下的location中,添加红色一条代码,该代码作用为禁止该IP访问服…

    云计算 2023年4月13日
    00
  • 云计算 kvm 虚拟化 简单介绍

    云计算是什么 一种网络资源的使用模式具有弹性计算,按需付费,快速扩展的特点 云计算的分类 私有云     在自建机房,内部使用。(安全、机密) 公有云    使用云提供商提供的服务。(方便、快捷、免维护) 混合云    上述两者都用 云的解决方案 IAAS(基础设施即服务) 网络、存储、虚拟化资源都不需要关心,只负责操作系统以上的东西 使用案例   open…

    2023年4月10日
    00
  • Python集中化管理平台Ansible介绍与YAML简介

    Python集中化管理平台Ansible介绍与YAML简介 Ansible介绍 Ansible是一种基于Python开发的集中化管理平台,可以使用SSH协议进行连接管理,并支持模块化、可组合的操作方式。其具有轻量、快速、高效、简单易学特点,适用于自动化配置、应用部署、编排等场景。 具体而言,Ansible可以用于: 自动化系统配置:支持定义剧本(playbo…

    云计算 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部