小程序wx.request请求的简单封装

冷不防 2023-08-17 15:47 113阅读 0赞

1、api.js

const baseUrl = 'https://api.it120.cc';
    
    const http = ({ url = '', param = {}, ...other } = {}) => {
        wx.showLoading({
            title: '请求中，请耐心等待..'
        });
        let timeStart = Date.now();
        return new Promise((resolve, reject) => {
            wx.request({
                url: getUrl(url),
                data: param,
                header: {
                    'content-type': 'application/json' // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
                },
                ...other,
                complete: (res) => {
                    wx.hideLoading();
                    console.log(`耗时${Date.now() - timeStart}`);
                    if (res.statusCode >= 200 && res.statusCode < 300) {
                        resolve(res.data)
                    } else {
                        reject(res)
                    }
                }
            })
        })
    }
    
    const getUrl = (url) => {
        if (url.indexOf('://') == -1) {
            url = baseUrl + url;
        }
        return url
    }
    
    // get方法
    const _get = (url, param = {}) => {
        return http({
            url,
            param
        })
    }
    
    const _post = (url, param = {}) => {
        return http({
            url,
            param,
            method: 'post'
        })
    }
    
    const _put = (url, param = {}) => {
        return http({
            url,
            param,
            method: 'put'
        })
    }
    
    const _delete = (url, param = {}) => {
        return http({
            url,
            param,
            method: 'put'
        })
    }
    module.exports = {
        baseUrl,
        _get,
        _post,
        _put,
        _delete
    }

2、页面调用

const api = require('../../utils/api.js')
     
    // 单个请求
    api.get('list').then(res => {
     console.log(res)
    }).catch(e => {
     console.log(e)
    })
     
    // 一个页面多个请求
    Promise.all([
     api.get('list'),
     api.get(`detail/${id}`)
    ]).then(result => {
     console.log(result)
    }).catch(e => {
     console.log(e)
    })

转载于:https://www.cnblogs.com/congfeicong/p/11235046.html

发表评论取消回复

表情：

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

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

相关阅读

相关小程序wx.request请求的简单封装

1、api.js const baseUrl = 'https://api.it120.cc'; const http = ({ url = '',

冷不防/ 2023年08月17日 15:47/ 0 赞/ 114 阅读

相关微信小程序请求封装

创建 config.js 文件管理环境 class Config { } const version = '/v1.1.12'

雨点打透心脏的1/2处/ 2023年02月23日 08:04/ 0 赞/ 49 阅读

相关小程序封装请求最终版

//api接口配置 let subDomain = '' // 子域名,没有就等于'' const API_BASE_URL = 'https://ni

骑猪看日落/ 2023年02月20日 07:20/ 0 赞/ 69 阅读

相关小程序封装request请求

封装request请求 > 与page平级新建`request/index.js`文件 > > 使用方法：在`页面的.js`文件最上面添加 > > import

Myth丶恋晨/ 2023年02月18日 14:04/ 0 赞/ 38 阅读

相关小程序封装网络请求

/ @param {string 请求的方式 get/post} method @param {发送的参数} params @param {请求的接口地址} u

ゝ一纸荒年。/ 2022年10月27日 00:30/ 0 赞/ 261 阅读

相关微信小程序封装request请求

我的个人刷Java面试题网站:[http://www.study-java.cn/][http_www.study-java.cn] 在小程序开发中，通过接口获取后台数据，这

浅浅的花香味﹌/ 2022年05月31日 04:15/ 0 赞/ 357 阅读

相关小程序网络请求封装

目录结构 ... ├── images ├── api │ └── index.js // 首页的接口 │ └── classify.js

爱被打了一巴掌/ 2022年02月26日 12:52/ 0 赞/ 308 阅读

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

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

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

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

网络请求小程序提供了wx.request，仔细看一下 api，这不就是n年前的 $.ajax 吗，好古老啊。 // 官方例子 wx.request({

小鱼儿/ 2021年07月27日 02:41/ 0 赞/ 488 阅读

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

http.js import utils from "../../utils/utils" var http = utils.http; const

柔光的暖阳◎/ 2021年07月25日 02:59/ 0 赞/ 525 阅读