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