How to use vue to realize the secondary encapsulation of axios

This article mainly introduces how to use vue to achieve the secondary packaging of axios related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use vue to achieve the secondary packaging of axios will have a harvest, let's take a look.

Define common parameters and incoming components:

Import axios from 'axios'import qs from' qs' axios.interceptors.request.use (config = > {/ / Show loading return config}, error = > {return Promise.reject (error)}) axios.interceptors.response.use (response = > {return response}, error = > {return Promise.resolve (error.response)}) function errorState (response) {/ / hide loading console.log (response) / / if the http status code is normal Return data if directly (response & & (response.status = 200 | | response.status = 304 | | response.status = 400)) {return response / / if you don't need data other than data You can directly return response.data} else {Vue.prototype.$msg.alert.show ({title: 'hint', content: 'network exception'})} function successState (res) {/ / hide loading / / uniformly judge the error code if (res.data.errCode = = '000002') returned by the backend {Vue.prototype.$msg.alert.show ({title: 'hint') Content: res.data.errDesc | | 'network exception', onShow () {}, onHide () {console.log ('OK'}})} else if (res.data.errCode! = '000002'&&res.data.errCode! =' 000000') {Vue.prototype.$msg.alert.show ({title: 'prompt', content: res.data.errDesc | 'network exception' OnShow () {}, onHide () {console.log ('OK')} const httpServer = (opts, data) = > {let Public = {/ / Common parameter 'srAppid': ""} let httpDefaultOpts = {/ / http default configuration method:opts.method, baseURL, url: opts.url, timeout: 10000, params:Object.assign (Public, data) Data:qs.stringify (Object.assign (Public, data)), headers: opts.method=='get'? {'XmurRequestedwictewthpieces:' XMLHttpRequest', "Accept": "application/json", "Content-Type": "application/json" Charset=UTF-8 "}: {'XmurRequestedmurmurWithparts:' XMLHttpRequest', 'Content-Type':' application/x-www-form-urlencoded Charset=UTF-8'} if (opts.method=='get') {delete httpDefaultOpts.data} else {delete httpDefaultOpts.params} let promise = new Promise (function (resolve, reject) {axios (httpDefaultOpts). Then ((res) = > {successState (res) resolve (res)}). Catch ((response) = > {errorState (response) reject (response)}) return promise} export default httpServer

Encapsulation reason:

1. You can discuss the error code with the backend and give a unified prompt to deal with it, so as to save unnecessary trouble.

2. If you do the interface, you can encrypt and decrypt the whole message here.

Unified classification of APIs:

Const serviceModule = {getLocation: {url: 'service/location/transfor', method:' get'}} const ApiSetting = {... serviceModule} export default ApiSetting

Classification benefits:

1. Later interface upgrade or interface name change is easy to maintain

Http call:

Import http from ".. / lib/http.js"; import ApiSetting from ".. / lib/ApiSetting.js" Export default {created: function () {http (ApiSetting.getLocation, {"srChannel": "H6",}) .then (res) = > {console.log (res)}, (error) = > {console.log (error)})}, methods: {}} this is the end of the article on "how to use vue to achieve the secondary encapsulation of axios". Thank you for reading! I believe that everyone has a certain understanding of "how to use vue to achieve the secondary packaging of axios" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.