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

Today, the editor will share with you how to eliminate the relevant knowledge points of if in axios interception. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Basic intercept

In the error interception of axios response, it is inevitable to make all kinds of if judgments or switch to error.status. In order to prevent the boring life (dig a hole for yourself, change the position to write and intercept

/ / the following are probably daily operations encountered to intercept responses and judge status to do corresponding operations function login () {console.log ('login logic') return promise.reject (error)} / / add response interceptor axios.interceptors.response.use (function (response) {/ / do something return response to response data } Function (error) {if (error.status = = 401) {/ / 401 re-log in to console.log ('not logged in') return login (error)} else if (error.status = 404) {console.log ('404-nothing') return promise.reject (error)} else if (error.status = 422) {console.log (error.response.data.message) return promise.reject (error)} Else if (error.status = = 500) {console.log ('server internal error') return promise.reject (error)} else {/ / other requests Directly throw and let the business deal with return promise.reject (error)}}) Design wheel thinking direction

First of all, think about how to achieve this thing.

Need a logical judgment to digest if internally

Executing the corresponding logic according to the judgment means that we have to maintain a logical array internally (hereinafter referred to as the pipeline array), and the corresponding pipeline will be triggered after the match is successful. So collect the pipes before you start calling the function to execute. This method requires passing a tag (to determine whether it matches) and a callback function (logic after a successful match).

In addition to passing a token, you need to pass a payload (such as error in intercept) parameter. Payload allows us to do more corresponding operations in the callback function.

At the end, add a default function to collect the functions after the match failed.

Now, I have drawn up the internal organs of a small wheel in my mind.

Wheel skeleton / / define a classclass Enterclose {constructor () {/ / maintenance pipeline array this.pond = {} / / default pipe this._default = null} / * Collection pipeline * callback (payload) * @ param {any} sign tag * @ param {Function | Object} callback callback function | function this * @ return this * * / use (sign Callback) {return this} / * collect matching failed pipes * callback (payload) * @ param {Function} callback callback function | function this * @ return this * * / default (callback) {this._default = callback return this} / * execute pipeline flow * @ param {any} sign tag * @ param {any} payload * @ return * / start (sign Payload) {}} detailed implementation

Write the basic api skeleton above, and then slowly implement the internal logic one by one.

The first is use, which is used to collect pipes, and the tags are unique in the requirements, so the structure of our this.ponds is {tag: callback}

Use (sign, callback) {this.ponds [sign] = callback return this}

Where we need a method to start Enterclose

Use the getCallback function to filter the pipes that match the tag, and return the corresponding function. Such a small wheel to eliminate if will be done.

Start (sign Payload) {const fn = this.getCallback (sign) if (fn) {return fn (payload)}} / * get the function * @ param {*} sign * @ return {Function} * / getCallback (sign) {const key = Object.keys (this.ponds). Find (key = > key = = sign) if (key) {return this.ponds [key]} else if (this._) Default) {return this._default}} practice

Create an instance, collect pipes with use and default, and then use start to trigger judgment during interception

Const enterclose = new Enterclose () / / Collection pipeline enterclose.use (401, function (error) {console.log ('not logged in') return login (error)}) .use (404, function (error) {console.log ('404-nothing') return promise.reject (error)}) .use (429, function (error) {console.log (error.response.data.message) return promise.reject (error)}) .use (500) Function (error) {console.log ('server internal error') return promise.reject (error)}) .default (function (error) {/ / collect default pipeline return promise.reject (error)}) axios.interceptors.response.use (function (response) {/ / do something about response data return response }, function (error) {/ / start return enterclose.start (error.status, error)})

You can also make some adjustments according to your own scenario, such as supporting Promise, or adding a finally function, which will be called every time you go through the pipeline.

These are all the contents of the article "how to eliminate if in axios interception". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.