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

 更新时间:2022年03月01日 10:42:52   作者:喜欢撸猫的帅伟  
大家做小程序项目的时候肯定会遇到数据对接需求,下面这篇文章主要给大家介绍了关于微信小程序网络请求模块封装的具体实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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

具体实现

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() 获取到需要的数据,最后进行页面渲染。

总结

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

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

相关文章

  • JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

    JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

    这篇文章主要介绍了JS获取日期的方法,结合具体实例分析了javascript计算昨天,今天,明天,前n天,后n天日期及对应的星期几实现技巧,需要的朋友可以参考下
    2017-09-09
  • JS实现点击button按钮切换图片

    JS实现点击button按钮切换图片

    这篇文章主要为大家详细介绍了JS实现点击button按钮切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS面向对象编程实现的Tab选项卡案例详解

    JS面向对象编程实现的Tab选项卡案例详解

    这篇文章主要介绍了JS面向对象编程实现的Tab选项卡,结合具体案例形式详细分析了JS基于面向对象程序设计实现Tab选项卡的相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • JavaScript Promise启示录

    JavaScript Promise启示录

    近几年随着JavaScript开发模式的逐渐成熟,CommonJS规范顺势而生,其中就包括提出了Promise规范,Promise完全改变了js异步编程的写法,让异步编程变得十分的易于理解
    2014-08-08
  • javascript转换字符串为dom对象(字符串动态创建dom)

    javascript转换字符串为dom对象(字符串动态创建dom)

    那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象
    2010-05-05
  • HTML与javascript常碰到的编码问题

    HTML与javascript常碰到的编码问题

    在日常的前端开发工作中,我们会经常的与HTML、javascript、css等语言打交道,和一门真正的语言一样,计算机语言也有它的字母表、语法、词法、编码方式等
    2008-12-12
  • JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    在之前的一篇博文中我介绍了一种方法可以让JavaScript具有一种近似于Lambda表达式的编程能力——但是它有一些缺点,其中妨碍它的使用的最主要的一条就是多了一层括号,让代码变得难以阅读。
    2010-09-09
  • 鸿蒙JS实战之计算器功能开发实例

    鸿蒙JS实战之计算器功能开发实例

    这篇文章主要给大家介绍了关于鸿蒙Js实战之计算器功能开发的相关资料,计算器是我们生活中经常使用的应用,此项目是基于Harmony实现的简易计算器,需要的朋友可以参考下
    2024-02-02
  • javascript读取本地文件和目录方法详解

    javascript读取本地文件和目录方法详解

    这篇文章主要介绍了javascript读取本地文件和目录方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 小程序多图列表实现性能优化的方法步骤

    小程序多图列表实现性能优化的方法步骤

    这篇文章主要介绍了小程序多图列表实现性能优化的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论