微信小程序网络请求模块封装的具体实现

目录
  • 前言
  • 具体实现
    • 1.确定结构
    • 2.service网络请求的基本配置和公共方法
    • 3.apis创建对应功能模块的网络请求方法
    • 4.使用
  • 总结

前言

在进行一个微信小程序项目开发的时候我需要网络请求模块和后端数据进行沟通; 接下来就和我一起简单的封装的一下网络请求模块吧。

具体实现

1. 确定结构

在根目录新建 service和apis文件夹;

service用来做网络请求的基本配置和输出公共的网络请求方法;

apis用来创建对应功能模块的网络请求方法(ex:操作音乐、操作视频);

2. service 网络请求的基本配置和公共方法

config.js 用来放置一些基本的配置:

//config.js
const BASE_URL = "https://www.qq.com/apis"
const TIMEOUT = 10000

export {
 BASE_URL,
 TIMEOUT
}

这里我们简单配置了网络请求的地址BASE_URL和超时的时间TIMEOUT;

index.js创建网络请求,生成公共方法:

import { BASE_URL, TIMEOUT } from './config'
class MYRequest {
    request(url,method,data){
        //返回Promise对象
        return new Promise((resolve, reject)=> {
            wx.request({
                url: BASE_URL + url,
                timeout: TIMEOUT,
                method: method,
                data: data,
                success: (res) => {
                    resolve(res);
                },
                fail: (res) => {
                    reject(res);
                },
            })
        })
    }
    get(url, params){
        return this.request(url, "GET", params);
    }
    post(url, data){
        return this.request(url, "POST", data);
    }
}
const myRequest = new MYRequest;
export default myRequest;

这里使用的是微信小程序官方的网络请求APIwx.request,对他进行一个封装。:参考地址;

为了让我们能很方便的拿到数据和抓取错误,我们返回了一个Promise对象,使用的时候就像这样:

  myRequest.get('XXX', {
    data: data
  }).then(res=>{
      //拿到数据,处理数据
  }).cath(res=>{
      //抓取错误
      console.log(res);
  });

我们还新增两个常用的网络请求方法 get()和post(),在每次调用的时候执行request(url, "GET/POST", params)方法进行数据请求并返回Promise对象。

3. apis 创建对应功能模块的网络请求方法

引入刚刚创建的service/index.js

//api_music.js
import ApiService from "../service/index"
export function getMusic(singer , limit = 10){
  return ApiService.get('/music', {
    singer: singer,
    limit: limit,
  })
}

我们导出 getMusic(singer , limit = 10)方法,这样我们就创建好了一个根据歌手名字查找歌曲的get网络请求,当我们在需要使用这个网络请求的页面的时候,我们只需要引入改方法,就可以直接使用了。
我个人喜欢对不同的功能模块都创建一个js文件,api_music.js api_singer.js 这样我看到这个api文件我就可以知道他是干什么的属于哪一个功能,我修改起来效率会高很多。

4. 使用

  • 根据对应的功能,引入该功能模块需要用到的网络请求方法;
// pages/music-list/index.js
import {getMusic} from "../../apis/api_video";
Page({
    /**
     * 页面的初始数据
     */
    data: {
        musicList: null
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        getMusic("周杰伦").then(
            res => {
                this.setData({musicList:res.data.data})
            }
        ).catch(
            res => {
                console.log()
            }
        );
    },
})

在生命周期的页面加载阶段的时候,调用getMusic() 获取到需要的数据,最后进行页面渲染。

总结

这就是我在微信小程序开发中所使用的网络请求封装方法,希望可以给大家带来帮助。

到此这篇关于微信小程序网络请求模块封装实现的文章就介绍到这了,更多相关微信小程序网络请求模块封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序中如何使用flyio封装网络请求

    Flyio简介 Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一.标准的Promise API.不仅如此,Fly.js还支持请求/响应拦截器.自动转化JSON.请求转发等功能,详情请参考:https://github.com/wendux/fly . 下面我们看看在微信小程序.mpvue中和中如何使用fly. Flyio 官方地址 文档 github地址 Flyio的一些特点 fly.js 是一个基于 pr

  • 微信小程序网络请求封装示例

    网络请求 网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊. // 官方例子 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 小程

  • 微信小程序网络请求的封装与填坑之路

    以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装. 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题 示例代码: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.lo

  • 详解微信小程序网络请求接口封装实例

    网络请求封装实例 实现定制要求和方便调用,对微信小程序的网络请求接口进行了封装 封装位置:app.js,方便全局调用 实现方法调用,只用关注接口url和入参 默认和自定义的请求成功.失败和完成的回调处理 可设置请求失败自动重新请求的次数 可以防止重复提交 每个请求设定requestCode 代码 直接将这个方法放在了app.js中 /** * 接口公共访问方法 * @param {Object} urlPath 访问路径 * @param {Object} params 访问参数(json格式)

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

  • 微信小程序网络请求模块封装的具体实现

    目录 前言 具体实现 1.确定结构 2.service网络请求的基本配置和公共方法 3.apis创建对应功能模块的网络请求方法 4.使用 总结 前言 在进行一个微信小程序项目开发的时候我需要网络请求模块和后端数据进行沟通: 接下来就和我一起简单的封装的一下网络请求模块吧. 具体实现 1. 确定结构 在根目录新建 service和apis文件夹: service用来做网络请求的基本配置和输出公共的网络请求方法: apis用来创建对应功能模块的网络请求方法(ex:操作音乐.操作视频): 2. ser

  • 微信小程序 网络请求(post请求,get请求)

    微信小程序 网络请求 1.post请求: onLoad: function() { that = this; wx.request( { url: "url", header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: {}, complete: function( res ) { console.log(res

  • 微信小程序 网络请求(GET请求)详解

    微信小程序 网络请求 GET 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接. 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序. 2.wx.request(OBJECT)  参数说明: 微信小程序支持GET,POST等请求.用method可以设置. 以下是GET请求的代码: <span style="font-size:18px;">//rate.js //获取应用实例

  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

  • 微信小程序网络请求实现过程解析

    这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i

  • 微信小程序 网络请求API详解

    wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var

  • 微信小程序  网络请求API详解

    wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var

随机推荐