Axios interception settings and Error Handling Methods

Axios interception settings and Error Handling Methods

Now the official vue package does not update vue-resource. Instead, we recommend axios. The following is the axios plug-in configuration summarized in the project practice:

/*** @ File Axios Vue plug-in (add global request/response blocker) * // https://github.com/mzabriskie/axiosimport axios from 'axios '// intercept request, set global request to ajax request axios. interceptors. request. use (config) => {config. headers ['x-Requested-with'] = 'xmlhttprequest 'Return config}) // intercept the response and handle errors in axios. interceptors. response. use (response) => {const data = response. data // perform different processing (and backend conventions) based on the returned code value switch (data. code) {case '0 ':/ /Example/exp: fixed the blank page issue when the iPhone 6 + Click returns. if (isIOS () {// asynchronous to ensure that the data has been rendered to the page setTimeout (() ==>{ // force the browser to re-paint the document by scrolling. body. scrollTop + = 1}, 0)} // This step ensures that data is returned. If no return is returned, the following code is used, return data // You need to log on to case 'shiro _ e5001' again if (isWeChat () & IS_PRODUCTION) {axios. get (apis. common. wechat. authorizeUrl ). then ({result}) => {location. replace (global. decodeURIComponent (result ))})} Else {// otherwise, log on to h5 and bring the jump route const search = encodeSearchParams ({next: location. href,}) location. replace ('/user/login? $ {Search} ')} // The message data is not displayed. description = ''break default:} // If the returned code is incorrect and has been logged on, the const err = new Error (data. description) err. data = data err. response = response throw err}, (err) =>{// here is the error handling when the returned status code is not 200 if (err & err. response) {switch (err. response. status) {case 400: err. message = 'request error' break case 401: err. message = 'unauthorized, please log on to 'break case 403: err. message = 'Access denay' break case 404: err. message = 'request address error: $ {err. response. config. url} 'break case 408: err. message = 'request timeout' break case 500: err. message = 'internal server error' break case 501: err. message = 'service not implemented 'break case 502: err. message = 'Gateway error' break case 503: err. message = 'service unavailable 'break case 504: err. message = 'Gateway timeout' break case 505: err. message = 'HTTP version does not support 'break default:} return Promise. reject (err)}) axios. install = (Vue) => {Vue. prototype. $ axios = axios} export default axios

The above axios interception settings and error handling methods are all the content that I have shared with you. I hope to give you a reference, and I hope you can provide more support for the customer's house.