vue axios encapsulates httpjs interface common configuration intercepts operations

Make 1 record and configure the common request https in the vue project.

(1) Position, create src/utils/http. js in src

import axios from 'axios' //  Quote axios
import { MessageBox, Message } from 'element-ui'
import Qs from 'qs' // Introducing data formatting 
import router from '@/router'
 
// axios  Configure 
axios.defaults.timeout = 50000 // Setting interface response time 
// axios.defaults.baseURL = 'https://easy-mock.com/mock/' //  This is the call data interface , Common interface url+ Call interface name 
let httpUrl = window.location.host
if (httpUrl.indexOf('.com') !== -1) {
 console.log(' Production environment ', httpUrl)
} else if (httpUrl.indexOf('.net') !== -1) {
 console.log(' Test environment ', httpUrl)
 axios.defaults.baseURL = 'http://www.test.com' //  This is the call data interface , Common interface url+ Call interface name 
} else if (httpUrl.indexOf('localhost:8088') !== -1) {
 console.log(' Specify the development environment ', httpUrl)
 axios.defaults.baseURL = 'http://localhost:8088/'
} else {
 console.log(' Development environment ', httpUrl)
 axios.defaults.baseURL = 'http://192.168.6.138:8080/' //  This is the call data interface , Common interface url+ Call interface name 
}
 
// http request  Interceptor, through this, we can put Cookie Pass to the background 
axios.interceptors.request.use(
 config => {
  if (config.method == "post") {
  // console.log(' Request path ', config.url)
  if (config.url === '/b/login/checkLogin') {
   config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded' //  Setting cross-domain headers 
   }
   config.data = Qs.stringify(config.data)
  } else if (config.url === '/b/carModel/createCarModelVersion') {
   //  Set file upload here and configure individual request headers 
   config.headers = {
    'Content-Type': 'multipart/form-data'
   }
  } else {
   let userInfo = localStorage.getItem('userInfo')
   if (userInfo === null) {
    return null
   }
   let bToken = localStorage.getItem('btoken')
   if (bToken === null) {
   } else {
    config.data.vwToken = bToken
   }
   config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded' //  Setting cross-domain headers 
   }
   config.data = Qs.stringify(config.data)
  }
}else{
console.log("get Request ")
}
  return config
 },
 err => {
  return Promise.reject(err)
 }
)
 
// http response  Interceptor 
axios.interceptors.response.use(
 response => {
  // console.log(' Request interception return parameter ', response)
  if (response.status === 200) {
   //  Success 
   let returnCode = response.data.code
   if (returnCode > 10000 && returnCode < 20000) {
    // console.log(' Success ', response)
    Message.success(response.data.msg)
   } else if (returnCode >= 20000 && returnCode < 30000) {
    //  Pop-up window only, no operation 
    // console.log(' Failure 1', response)
    Message.error(response.data.msg)
   } else if (returnCode >= 30000 && returnCode < 40000) {
    //  Only pop-up window, click to jump to the login page 
    localStorage.removeItem('userInfo')
 
    MessageBox.confirm(response.data.msg, ' Confirm logout ', {
     confirmButtonText: ' Re-login ',
     cancelButtonText: ' Cancel ',
     type: 'warning'
    }).then(() => {
     // console.log(' You should log out here   Re-instantiation ')
     router.push({ path: '/login' })
    })
   }
  }
  return response
 },
 error => {
  // console.log('error', error.toString())
  if (
   error.toString().trim() ===
   "TypeError: Cannot read property 'cancelToken' of null"
  ) {
   localStorage.removeItem('userInfo')
   MessageBox.confirm(
    ' Session credentials are invalid. You can cancel staying on this page or log in again ',
    ' Confirm logout ',
    {
     confirmButtonText: ' Re-login ',
     cancelButtonText: ' Cancel ',
     type: 'warning'
    }
   ).then(() => {
    // console.log(' You should log out here   Re-instantiation ')
    router.push({ path: '/login' })
   })
  }
 
  // console.log(error.toString().trim())
  if (error.toString().trim() === 'Error: Network Error') {
   MessageBox.alert(' Network request exception, please try again later ', ' There's been a mistake ', {
    confirmButtonText: ' Determine ',
    callback: action => {}
   })
  }
  return Promise.reject(error.response.data)
 }
)
 
export default axios
 
/**
 * fetch  Request method 
 * @param url
 * @param params
 * @returns {Promise}
 */
export function get(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios
   .get(url, {
    params: params
   })
   .then(response => {
    resolve(response.data)
   })
   .catch(err => {
    reject(err)
   })
 })
}
 
/**
 * post  Request method 
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data).then(
   response => {
    // console.log(response.data.code)
    resolve(response.data)
   },
   err => {
    reject(err)
   }
  )
 })
}
 
/**
 * patch  Method encapsulation 
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data).then(
   response => {
    resolve(response.data)
   },
   err => {
    reject(err)
   }
  )
 })
}
 
/**
 * put  Method encapsulation 
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data).then(
   response => {
    resolve(response.data)
   },
   err => {
    reject(err)
   }
  )
 })
}

(2) Introducing call in main. js to define global

import axios from 'axios'
import { post, get, patch, put } from './utils/http'
 
//  Will axios Add to prototype chain 
Vue.prototype.$axios = axios
 
//  Define global variables 
Vue.prototype.$post = post
Vue.prototype.$get = get
Vue.prototype.$patch = patch
Vue.prototype.$put = put

(3) Use it directly on the. vue page that needs to be used

//this.logForm  For transmission of reference 
 
this.logForm = { id: this.selectId, knowledgeVersionId: this.baseValue }
this.$post(' Yours url', this.logForm).then(req => {
    this.logList = req.data
    this.logList.allCount = req.allCount
    this.logList.nowPage = req.nowPage
    this.logList.pageSize = req.pageSize
    this.loading = false
   }).catch(err => {
    console.log(err)
   })
 
 this.$post('/b/checkConfig/updateRelateKnowledge', { id: this.selectId, knowledgeVersionId: this.baseValue }).then(req => {
    console.log(req)
    if (req.code === 10000) {
     // this.options = req.data
     this.getConfigList()
    }
   }).catch(err => {
    console.log(err)
   })

Supplementary knowledge: Vue project about axios twice encapsulated service

1. Install axios: npm i axios--save

2. Create a new file service. js in the src directory

3. Write the following code in the service. js file

import axios from 'axios'

//  Create 1 Object with a common configuration axios Instances , The configuration content in the example depends on the actual development requirements 
export const service = axios.create({
 baseURL: 'http://***.***.*.**:8080/', //  Test environment 
 timeout: 1000 * 10, //  The number of milliseconds the request timed out , If the request costs more than timeout Time of , The request will be interrupted 
 withCredentials: true, //  Indicates whether credentials are required for cross-domain requests , Default fasle
 headers: { 'Cache-Control': 'no-cache' } //  Cache is not allowed, request needs to be retrieved again 
})

//  Add a request interceptor 
service.interceptors.request.use(config => {
 //  What to do before sending the request 
 return config
}, error => {
 //  Do something about request errors 
 return Promise.reject(error)
})

//  Add a response interceptor 
axios.interceptors.response.use(response => {
 //  Do something about the response data 
 return response
}, error => {
 //  Do something about response errors 
 return Promise.reject(error)
})

The above is the preliminary encapsulation of axios, and the specific functions are configured in service. js file according to actual requirements

4. Use service for global use (it can also be used locally, which will be explained later)

Step 1: Mount in main. js

import { service } from './service'

Vue.prototype.service = service

Step 2: Use the

//  Note: You must use the async  And  await  Otherwise request status 1 Straight Promise {<pending>}, Unable to get the requested data 
 async created () {
  let data = await this.service.get('menu/user/tree')
  console.log(data) // You can get the requested data at this time 
 }

5. Use service locally, and introduce it first and then use it in the component

<script>
import { service } from '../service'
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'sds'
  }
 },
 async created () {
  let data = await service.get('menu/user/tree')
  console.log(data)
 }
}
</script>