wx.request(Object object) HTTPS 网络请求 封装

微信小程序 wx.request

requesttask wx.request(object object)发起 https 网络请求。

示例代码

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

wx.request 不进行二次封装确实不太好用 分享下我这边wx.request的封装

api.js

const app = getapp()

const request = (url, options) => {
    return new promise((resolve, reject) => {
        wx.request({
            url: `${app.globaldata.host}${url}`,
            method: options.method,
            data: options.data,
            header: {
                'content-type': 'application/json; charset=utf-8',
                'authorization': app.globaldata.accesstoken
            },
            timeout: 10000,
            success(request) {
                if (request.statuscode === 200) {
                    resolve(request.data)
                } else if (request.statuscode === 401) {
                    wx.navigateto({
                        url: '/pages/login/login'
                    })
                    reject(request.data)
                } else if (request.statuscode === 500) {
                    wx.showmodal({
                        title: '系统错误',
                        content: request.data.errmsg,
                    })
                    reject(request.data)
                } else {
                    reject(request.data)
                }
            },
            fail(error) {
                wx.showmodal({
                    title: '系统错误',
                    content: '服务器正在开小差',
                })
                reject(error.data)
            },
            complete: function (res) {}
        })
    })
}

// 把需要loading的方法进行封装，减少不必要代码
const requestwithloading = (url, options) => {
    return new promise((resolve, reject) => {
        wx.showloading({
            title: '加载中',
        })
        wx.request({
            url: `${app.globaldata.host}${url}`,
            method: options.method,
            data: options.data,
            header: {
                'content-type': 'application/json; charset=utf-8',
                'authorization': app.globaldata.accesstoken
            },
            timeout: 10000,
            success(request) {
                if (request.statuscode === 200) {
                    resolve(request.data)
                } else if (request.statuscode === 401) {
                    wx.navigateto({
                        url: '/pages/login/login'
                    })
                    reject(request.data)
                } else if (request.statuscode === 500) {
                    wx.showmodal({
                        title: '系统错误',
                        content: request.data.errmsg,
                    })
                    reject(request.data)
                } else {
                    reject(request.data)
                }
            },
            fail(error) {
                wx.showmodal({
                    title: '系统错误',
                    content: '服务器正在开小差',
                })
                reject(error.data)
            },
            complete: function (res) {
                wx.hideloading()
            }
        })
    })
}

const get = (url, options = {}) => {
    return request(url, {
        method: 'get',
        data: options
    })
}

const getwithloading = (url, options = {}) => {
    return requestwithloading(url, {
        method: 'get',
        data: options
    })
}

const post = (url, options) => {
    return request(url, {
        method: 'post',
        data: options
    })
}

const postwithloading = (url, options) => {
    return requestwithloading(url, {
        method: 'post',
        data: options
    })
}

const put = (url, options) => {
    return request(url, {
        method: 'put',
        data: options
    })
}

const putwithloading = (url, options) => {
    return requestwithloading(url, {
        method: 'put',
        data: options
    })
}
// 不能声明delete（关键字）
const remove = (url, options) => {
    return request(url, {
        method: 'delete',
        data: options
    })
}

const removewithloading = (url, options) => {
    return requestwithloading(url, {
        method: 'delete',
        data: options
    })
}

module.exports = {
    get,
    getwithloading,
    post,
    postwithloading,
    put,
    putwithloading,
    remove,
    removewithloading
}

使用方式

const api = require('../../api/api')
page()前引入


api.post(login, {
    data: ''
}).then(res => {
    if(){}
}).catch(err => {
    wx.showtoast({
         title: err.message,
         icon: 'none'
    })
})

data 参数说明

最终发送给服务器的数据是 string 类型，如果传入的 data 不是 string 类型，会被转换成 string 。转换规则如下：

对于 get 方法的数据，会将数据转换成 query string（encodeuricomponent(k)=encodeuricomponent(v)&encodeuricomponent(k)=encodeuricomponent(v)...）
对于 post 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 json 序列化
对于 post 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeuricomponent(k)=encodeuricomponent(v)&encodeuricomponent(k)=encodeuricomponent(v)...）