温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序项目构建后http请求封装的示例分析

发布时间:2021-04-01 10:29:04 来源:亿速云 阅读:107 作者:小新 栏目:移动开发

这篇文章将为大家详细讲解有关微信小程序项目构建后http请求封装的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、http模块分装

首先我们为什么要去分装微信的http模块呢,我们先看一下微信自带的http请求它的一个写法

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

这种请求方式呢类似我们古老的jquery方式的分装,我们需要在success的回调函数里面做一些业务操作,这种方式会形成我们的回调地狱问题,同时代码也不够直观,以及代码过于繁琐;

接下来我会通过promise的这种方式对于代码进行分装,将请求方式做一些简化

一、项目目录构建

微信小程序项目构建后http请求封装的示例分析

在utils目录下边创建request.js文件,去做http请求封装,我们是通过promise这种方式进行封装,这样有利于我们对于错误的处理,也可以很直观的查看业务逻辑,封装示例代码如下:

/**
 * 
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
 */
function request(url, data={}, method='GET', header="Content-Type: application/json",) {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: 'json',
            responseType: 'text',
            success: (res)=>{
                if(res.statusCode === 200) {
                    if (res.data.code === 200) {
                        resolve(res.data)
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: 'none',
                            image: '',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                resolve(res.data);
                            },
                        });
                    }
                } else {
                   
                }
            },
            fail: (res)=>{
                // 需要我们加上统一的错误处理代码
                reject(res)
            },
            complete: ()=>{}
        });
    }) 
}

// 封装方法
// 如果对于header有什么特殊的要求,可以在请求参数里面做一些添加,例如后续我们会在headder中加入我们的sessionkey这些内容
// header = {}里面添加header内容
// 这块是一个简版的说明
const header = {
    "Content-Type": "application/json",
    // 这个token是微信登录以后,将token存入在缓存中
    "token": "*****************"
}

const get = function(url, data, header) {
    return request(url, data, 'GET', header);
}

const post = function(url, data, header) {
    return request(url, data, 'POST', header);
}

const del = function(url, data, header) {
    return request(url, data, '', header);
}


module.exports = {
    get,
    post,
    del,
}

二、项目中请求的使用

首先我们在使用的位置引入我们封装好的http模块

import webHttp from './utils/request';

接下里我们可以使用我们封装好的webhttp工具,比之前直接用微信的request请求方式代码量降低,同时链式方式使得逻辑更加清晰

webHttp.get(api.user.info, {
    // nick_name: 
    ...self.globalData.userInfo
}).then((res) => {
    console.log(res);
})

大概上是这样的一个过程,实际过程中可能根据后端restful api的方式需要对封装继续完善,同样是对于post请求的data参数也有不同的处理,这个需要按照实际情况做出相应的调整,如果本篇文章有帮助到你,欢迎收藏点赞,同样有什么地方有更好的方式欢迎交流,进步永不停息

关于“微信小程序项目构建后http请求封装的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI