小程序接口封装

缺乏、安全感 2022-12-23 09:50 198阅读 0赞

第一步，新建 request.js 文件，把要封装的方法放进去

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

var app = getApp();
    //项目URL相同部分，减轻代码量，同时方便项目迁移
    //这里因为我是本地调试，所以host不规范，实际上应该是你备案的域名信息
    var host = 'http://192.168.1.1:9990/';   //此处本地接口地址
    
    /**
     * POST请求，
     * URL：接口
     * postData：参数，json类型
     * doSuccess：成功的回调函数
     * doFail：失败的回调函数
     */
    function request(url, postData, doSuccess, doFail) {
      wx.request({
        //项目的真正接口，通过字符串拼接方式实现
        url: host + url,
        header: {
          "content-type": "application/json;charset=UTF-8"
        },
        data: postData,
        method: 'POST',
        success: function (res) {
          //参数值为res.data,直接将返回的数据传入
          doSuccess(res.data);
        },
        fail: function () {
          doFail();
        },
      })
    }
    
    //GET请求，不需传参，直接URL调用，
    function getData(url, doSuccess, doFail) {
      wx.request({
        url: host + url,
        header: {
          "content-type": "application/json;charset=UTF-8"
        },
        method: 'GET',
        success: function (res) {
          doSuccess(res.data);
        },
        fail: function () {
          doFail();
        },
      })
    }
    
    /**
     * module.exports用来导出代码
     * js文件中通过var call = require("../util/request.js")  加载
     * 在引入引入文件的时候"  "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
     * 项目目录不止一级，不同的js文件对应的工具类的位置不一样
     */
    module.exports.request = request;
    module.exports.getData = getData;

第二步，在 app.js 里面引用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

var req = require('utils/request.js')
    
    
    
    
    
      func: {
        request: req.request
      }

第三步，在所需要使用的页面中调用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

const app = getApp()
    
    
    app.func.request('wx/login', obj, (res) => {
      console.log(res)
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      },(err) => {
        // 这里就是前面对应的fail
          console.log('err', err);
        }
       )
    })

就很棒呀

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221120/1c30b4491eb748e8a054f4c15a46bcbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221120/a8065fa0e1bb4befa604453ed710218e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201124172909794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序封装wx.request接口

根目录新建一个api.js的文件用于存放wx.request的代码 **api.js** const app = getApp(); let po...

电玩女神/ 2024年04月17日 22:24/ 0 赞/ 89 阅读

相关微信小程序请求数据的接口封装

接口封装的request.js文件内容如下： //项目URL相同部分，减轻代码量，同时方便项目迁移 //这里因为我是本地调试，所以host不规范，实际上应该

ゝ一世哀愁。/ 2023年07月03日 12:18/ 0 赞/ 9 阅读

相关小程序接口封装

第一步，新建 request.js 文件，把要封装的方法放进去 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

缺乏、安全感/ 2022年12月23日 09:50/ 0 赞/ 199 阅读

相关在微信小程序中封装api接口

文章目录一、创建一个文件夹api 1、env.js 2、request.js 3、在 red\_memorial.js写它

朱雀/ 2022年11月19日 01:13/ 0 赞/ 301 阅读

相关小程序封装tabbar

项目需求两种tabbar，外部tabbar有一个入口里面套了一个商城，商城有自己的tabbar，外部tabbar进入部分菜单时有限制条件，判断用户是否登录，是否

爱被打了一巴掌/ 2022年11月15日 11:29/ 0 赞/ 224 阅读

相关微信小程序封装接口

1. 封装公共的请求类 utils文件夹下创建request.js文件 // request.js const timeout = 1000

我就是我/ 2022年11月05日 06:22/ 0 赞/ 266 阅读

相关微信小程序wx.request接口封装

//app.js App({ / @name 请求数据 @param {string} url

「爱情、让人受尽委屈。」/ 2022年06月01日 09:58/ 0 赞/ 346 阅读

相关微信小程序HTTP接口请求封装

最近在学习小程序的编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码，如果能给大家提供帮助更好，我的项目后端是使用的Java SSM

ゝ一世哀愁。/ 2022年05月23日 23:51/ 0 赞/ 304 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1586 阅读

相关 Promise实践实现微信小程序接口封装

Promise实践实现微信小程序接口封装相信很多开发者都遇到过回调地狱的问题。由于微信小程序的API基本都是基于回调函数的异步操作，如果不使用其他框架或者封装API，...

朱雀/ 2020年06月21日 14:23/ 0 赞/ 869 阅读