mpvue网络接口请求封装

作者: honey缘木鱼 | 来源:发表于2019-02-16 16:36 被阅读2次

    Vue项目中使用axios来进行网络请求:https://www.jianshu.com/p/bf0111d250d5
    小程序网络请求:https://www.jianshu.com/p/232a373d5dcb

    在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

    (1). 在项目文件夹下的src下的utils下新建js文件,取名request.js
    (2).用wx.request封装的方法

    // 封装微信请求
    export function request (url, method, data) {
        return new Promise((resolve, reject) => {
            wx.request({
                data:data,
                method:method,
                url: url,
                success: function (res) {
                    if (res.data.status === 1) {
                        resolve(res.data)
                    } else {
                        reject(res.data)
                    }
                },
                fail:function (err) {
                    reject(err)
                }
            })
        })
    }
    

    (3).在main.js引入并设置为全局方法

    import { request } from './utils/request'
    Vue.prototype.$request = request
    

    (4).具体使用

     this.$request(this.$shopUrl+'api/product/list','POST',{
                page: 1,
                pageSize: 10
            }).then((response) => {
               //response.result就是成功返回数据
            })
    

    相关文章

      网友评论

        本文标题:mpvue网络接口请求封装

        本文链接:https://www.haomeiwen.com/subject/ntfieqtx.html