Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge of Axios agent configuration and encapsulation response interception processing. 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.

Axios proxy configuration and response interception processing

Axios is the asynchronous processing scheme officially recommended by vue, so it is used in several vue projects, so write down the agent configuration and response interception handling of Axios here.

Agent configuration

The main purpose of the proxy is to solve the cross-domain problem, but now the conventional way to solve the cross-domain problem is to let the backend configure the response header, and the cross-domain front end does not need any processing using cors.

But sometimes the backend is lazy, so the front end needs to complete the cross-domain request through the proxy request, which is equivalent to opening a server locally and making proxy requests to another server through the server.

However, this will give rise to some problems, that is, when the front-end project is redeployed to the server, the front-end project must also set up a proxy, or deploy the same origin environment directly with the back-end project.

The following is the configuration of the proxy request:

/ / module.exports = {dev {proxyTable: {'/': {/ / replace the interface starting with'/'in the config/index.js file target: 'http://www..com/', / / to this address changeOrigin: true, ws:true PathRewrite: {'^ /':''/ / remove the first slash}},'/ ws/**': {/ / because websocket is used in the project, the proxy target for websocket is also configured here: 'ws://www..com', ws: true Secure: false, logLevel: 'debug',}}.} host:' 0.0.0.0, / / mentioned here by the way Change host to '0.0.0.0' to allow computers in the local area network to access the project directly. The default is localhost.} response content interception processing

Because our axios request response will return the status code of the network request information, but usually we do not need such content in practical application, in order to facilitate us to deal with it uniformly, and finally only return the real content.

At the same time, we hope that although the network request is successful, if the content of the request fails, it will also be transferred to the catch step, that is, to catch the error.

The code is as follows

Const http = axios.create ({baseURL: 'api/', timeout: 20000,}) / / create an axios object / / intercept the response of a pair of axios objects http.interceptors.response.use ((response) = > {/ / enter here means the request is successful. The network request status code is 200, but we need to judge whether the content of the request is successful or not. If (response.data.ErrorCode! = = 0) {/ / because setting 0 in our project means the request is successful. So if we are not zero, we will reject return Promise.reject (response.data) directly. } return Promise.resolve (response.data) / / if the ErrorCode is 0, return the response.data directly to filter out the network status code}, (error) = > {/ / all the network status codes are not 200. this may be due to an interface error or no token. If (error.constructor.prototype.name = = "Error") {/ / determines whether the returned object is the wrong object. If yes, it means that the network request error Message ({showClose: true, message: 'network link problem or login failure!' , type: 'error'}) return new Promise (() = > {}) / / here we can perform chain asynchronous processing} return error.data;// other requests, indicating that the request content is incorrect and the error content is returned directly}) / / the proxy agent configuration resolution of the returned content {status: 200statusText: "OK", data {ErrorCode: 0, token:'xxxx', name:'xxxx'}} / / after processing {ErrorCode: 0, token:'xxxx', name:'xxxx'} Axios

Proxy is actually a convenient thing in front-end development. It can cross-domain access to other websites locally, but when the pages are packaged, proxy will fail.

I set up proxy in vue.config.js. The code is as follows

Proxy: {/ / matching path "/ api": {target: "XXXXXXXXX", / / destination host address changeOrigin: true,// whether to start the agent pathRewrite: {/ / rewrite the path "^ / api":''/ / if you encounter a url with the prefix'/ api', rewrite it as''}

For example:

The target of proxy is set to http://www.web-jshtml.cn/aaa

If you want to access http://192.168.1.114:8080/api/ and you encounter / api, you need to convert the domain name in front of / api to the address of target, that is

Convert http://192.168.1.114:8080 to http://www.web-jshtml.cn/aaa

That is,

Http://www.web-jshtml.cn/aaa/api/ this address, but because the'/ api' needs to be converted to an empty string in proxy's pathRewrite, the final access address is

These are all the contents of the article "Axios Agent configuration and encapsulation response interception handling". 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.