欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-03 22:38:15
微信小程序 wx.request 发起 HTTPS 网络请求。 示例代码 不进行二次封装确实不太好用 分享下我这边 的封装 api.js js const app = getApp() const request = (url, options) = { return new Promise((re ......

微信小程序 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)...)