Wechat applet wx.request

RequestTask wx.request(Object object) initiates an HTTPS network request.

Sample code

wx.request({
  url: 'test.php', //Example only, not real interface address
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // Default value
  },
  success (res) {
    console.log(res.data)
  }
})

Wx.request does not need to be encapsulated twice. It's really not easy to share the encapsulation of 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: 'System error',
                        content: request.data.errmsg,
                    })
                    reject(request.data)
                } else {
                    reject(request.data)
                }
            },
            fail(error) {
                wx.showModal({
                    title: 'System error',
                    content: 'The server is running errands',
                })
                reject(error.data)
            },
            complete: function (res) {}
        })
    })
}

// Encapsulate the methods that need Loading to reduce unnecessary code
const requestWithLoading = (url, options) => {
    return new Promise((resolve, reject) => {
        wx.showLoading({
            title: 'Loading',
        })
        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: 'System error',
                        content: request.data.errmsg,
                    })
                    reject(request.data)
                } else {
                    reject(request.data)
                }
            },
            fail(error) {
                wx.showModal({
                    title: 'System error',
                    content: 'The server is running errands',
                })
                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
    })
}
// Cannot declare DELETE (key)
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
}

Usage mode

const api = require('../../api/api')
Page()Pre introduction


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

data parameter description

The data finally sent to the server is of String type. If the data passed in is not of String type, it will be converted to String. The conversion rules are as follows:

For the data of GET method, the data will be converted to query string (encodeuriccomponent (k) = encodeuriccomponent (V) & encodeuriccomponent (k) = encodeuriccomponent (V)...)
For data with POST method and header ['content type '] as application/json, the data will be JSON serialized
For the data with POST method and header ['content type '] as application/x-www-form-urlencoded, the data will be converted to query string (encodeuriccomponent (k) = encodeuriccomponent (V) & encodeuriccomponent (k) = encodeuriccomponent (V)...)