In a project, it is often necessary to get data content from the back end. Especially when the front end and the back end are separated, the front end is deployed in an engineering way, and cross domain request becomes a necessary skill point of the front end. Fortunately, there are many solutions.
In vue, currently, axios is widely used for cross domain data request in development, but many people encounter the following problems:

• Asynchronous communication, unable to execute synchronously
• Unable to manage centrally
• Inconvenient reading
• Transferred before the request was successful
• The logic in then is more and more complicated

Previous network requests were written as follows:

// main.js

// Introducing axios
import axios from 'axios'
Vue.prototype.$axios = axios;

// Use in vue page

// get
let url = 'address'
this.$axios.get(url,{
  params:{} // parameter information
})
  .then((res) => {
    // Execute statement after success
  })
  .catch((err) =>{
    // Network interrupt or fail execution statement
  })

// post
let url = 'address'
this.$axios.post(url,{
  // parameter information
})
  .then((res) => {
    // Execute statement after success
  })
  .catch((err) =>{
    // Network interrupt or fail execution statement
  })

Perhaps in the current process, asynchrony can better solve the user experience, load first and then pop up. But there is always a scenario where we need a lot of content to process, and there is an obvious sequential execution relationship before and after, so asynchronous communication may cause unnecessary problems for you. Therefore, the asynchronous communication problem can be solved by using async/await

Create a new http.js file next to main.js

// http.js

//Introducing axios
import axios from 'axios'

var http = {
  // get request
  get: function(url,params){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
        .then((response) =>{
          resolve(response.data)
        })
        .catch((error) => {
          reject( error )
        })
    })
  }
  // post request
  post: function(url,params){
    return new Promise((resolve,reject) => {
      axios.post(url,params)
      .then((response) => {
        resolve( response.data )
      })
      .catch((error) => {
        reject( error )
      })
    })
  }
}

export default http

And introduced in the main.js entry

// Import http request
import http from './http.js'
Vue.prototype.$http = http

Now you can use it on the page

// Use in vue

// get
async login () {
  let url = 'address'
  let params = {} // parameter
  let res = await this.$http.get(url,params)
}
// post
async login () {
  let url = 'address'
  let params = {} // parameter
  let res = await this.$http.post(url,params)
}

async ahead of method
await is OK to put it in front of $http

Words:
async: asynchronous.
await: wait.