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)...）