mpvue使用wx.request封装请求

最新推荐文章于 2025-05-26 17:09:58 发布

qq_37672347

最新推荐文章于 2025-05-26 17:09:58 发布

阅读量651

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序 mpvue wx.request 文章标签：小程序 mpvue wx.request

本文链接：https://blog.youkuaiyun.com/qq_37672347/article/details/99679399

小程序同时被 3 个专栏收录

8 篇文章

订阅专栏

mpvue

3 篇文章

订阅专栏

wx.request

1 篇文章

订阅专栏

本文档介绍了如何在mpvue项目中封装wx.request，包括创建utils/wx-request.js，配置main.js，建立config/index.js和api.js，以及在vue页面中使用封装后的请求方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目目录：

1，在src下创建utils/wx-request.js

function request (url, method, data, header = {}) {
    wx.showLoading({
        title: '加载中' // 数据请求前loading
    })
    return new Promise((resolve, reject) => {
        wx.request({
            url: url, // 仅为示例，并非真实的接口地址
            method: method,
            data: data,
            headers: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                wx.hideLoading()
                resolve(res.data)
            },
            fail: function (err) {
                wx.hideLoading()
                reject(err)
            },
            complete: function () {
                wx.hideLoading()
            }
        })
    })
}

function get (url, data) {
    return request(url, 'GET', data)
}
 
function post (url, data) {
    return request(url, 'POST', data)
}

export default {
    request,
    get,
    post
}

2，main.js中引入到vue原型（此步骤可以忽略不进行，原因：只能在 .vue文件中通过this.$httpWX使用，不能在第三步骤创建的文件中使用）

import WXrequest from './utils/wx-request'

Vue.prototype.$httpWX = WXrequest

3，在src下创建config文件夹，在config下创建index.js文件, 引入wx-request.js文件为WXrequest，并引入第四步创建的api.js为 api

import WXrequest from '../utils/wx-request'
import api from './api';

使用WXrequest

4，在src下创建config文件夹，在config下创建api.js文件, 把所有接口地址放在这个文件里

let base = 'https://newapi.taoerxue.cn/1'

export  default {
    getAllOrgType: `${base}/org/getAllOrgType`,
    getAllOrgType01: `${base}/org/getAllOrgType01`,
    getAllOrgType02: `${base}/org/getAllOrgType02`,
    getAllOrgType03: `${base}/org/getAllOrgType03`,
    getAllOrgType04: `${base}/org/getAllOrgType04`,
}

接口只是例子，不是真正的几口地地

5，在vue页面中使用

<script>
    import ClickCounter from '@/components/click-counter';
    import {getAllOrgType} from '../../cofig'

    export default {
        components: {
            ClickCounter
        },
        data () {
            return {
                msg: 'hello'
            }
        },
        methods: {
            getOrgType () {
                getAllOrgType().then((json) => {
                    console.log(json.data)
                }).catch((err) => {
                    console.log(err)
                })
            }
        }
    }
</script>