Shulou(Shulou.com)05/31 Report--

This article mainly explains the "WeChat Mini Programs HTTP request from 0 to 1 encapsulation method", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "WeChat Mini Programs HTTP request from 0 to 1 encapsulation method"!

HTTP library

1. JQuery's $. Ajax

The XMLHttpRequest object is called and encapsulated in the relevant function in the configuration item. Once the necessary options are passed in, the corresponding send () method is called directly to request the data.

2 、 Axios

Promise-based request library, by judging the existence of XMLHTTPRequest objects, to support the client and node server to send requests, encapsulated very good HTTP library, support promise, intercept requests and responses, etc.

Mini Program web request

Wx.request ({url: 'test.php', / / is only an example, not the real interface address data: {x:', y:'}, header: {'content-type':' application/json' / / default}, success (res) {console.log (res.data)}})

Mini Program's own request is well encapsulated, which is similar to $.ajax and supports the setting of many configuration items, but lacks practical functions such as public configuration, response and request interception.

The first step is to create a request instance

Class Axios {constructor () {this.instance = null / / instance this.config = defaultConfig} create (instanceConfig) {const {config} = this / / add basic configuration this.config = {... config,... instanceConfig} return this} / / Singleton static getInstance () {if (! this.instance) {this.instance = new Axios ()} return this.instance}

Create an instance

Const axios = Axios.getInstance ()

Promise Packaging Mini Program request

Const dispatchRequest = function (config) {return new Promise ((resolve, reject) = > {wx.request ({... config, url: config.base + config.url, success: res = > {resolve (res)}, fail: res = > {reject (res)}})}

Add a request method to the request instance

Request (options) {const {config} = this / / add basic configuration const requsetOptions = {... config,... options} return dispatchRequest (requsetOptions)} when the instance is requested

Step 2-create a request tool method

Create an instance to set basic configuration items through create

Const instance = (config = {}) = > {return axios.create ({base: globalApi,... config})}

Create a request tool method to execute the instance request

Export function request (options) {const {baseConfig, url, method, data, isLogin} = options instance (baseConfig) .request ({url, method: method | | 'GET', data}) .then (res = > {options.success & & options.success (res)}) .catch (err = > {if (options.error) {options.error (err)} else {errAlert ()})}}

In this way, the tool method of a request is completed, but this method now only supports the configuration of basic requests and basic configuration items, and still lacks the interception of common requests and responses that we often use.

Part III-adding interceptors for requests and responses

Create an interceptor instance

Class InterceptorManager {constructor () {this.fulfilled = null this.rejected = null} use (fulfilled, rejected) {this.fulfilled = fulfilled this.rejected = rejected}}

Add request and response intercept instances to the constructor of the request instance

Constructor () {this.instance = null / / instance of class this.config = defaultConfig this.interceptors = {request: new InterceptorManager (), response: new InterceptorManager ()}}

Add the promise execution queue to the request of the instance

Request (options) {const {config, interceptors} = this / / add basic configuration const requsetOptions = {... config,... options} const promiseArr = [] / / promise storage queue / / request interceptor promiseArr.push ({fulfilled: interceptors.request.fulfilled, rejected: interceptors.request.rejected}) / / request promiseArr.push ({fulfilled: dispatchRequest) Rejected: null}) / / callback interceptor promiseArr.push ({fulfilled: interceptors.response.fulfilled, rejected: interceptors.response.rejected}) let p = Promise.resolve (requsetOptions) promiseArr.forEach (ele = > {p = p.then (ele ['fulfilled'], ele [' rejected'])}) return p}

By setting the interception method of request and response in the request tool method

Axios.interceptors.request.use (request = > {return request}, err = > {console.error (err)}) axios.interceptors.response.use (response = > {return response}, err = > {console.error (err)})

You can add data conversion in the request interception method, add sign, token, etc., in the request header, and do common data processing in the response interception method, etc.

Thank you for your reading, the above is the content of "WeChat Mini Programs HTTP request encapsulation method from 0 to 1". After the study of this article, I believe you have a deeper understanding of WeChat Mini Programs HTTP request encapsulation method from 0 to 1, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.