Solve the problem of Vue cross-domain axios asynchronous communication

In projects, it is often necessary to obtain data content from the backend. Especially when the front-end and back-end are separated, the front-end is engineered to deploy, and cross-domain requests have become a necessary skill point for the front-end. Fortunately, there are many solutions.

In vue, in development, axios is currently used to request data across domains, but many people encounter the following problems:

•Asynchronous communication, cannot be performed synchronously
•Cannot be managed centrally
•Inconvenient to read
•Replaced before the request was successful
•The logic in the then is getting more and more complicated

Previous network requests were written as follows:

// 
// Introduce axiosimport axios from 'axios'
.$axios = axios;
// Use in vue page// get
let url = 'address'
this.$(url,{
 params:{} // Parameter information})
 .then((res) => {
  // Execute the statement after success })
 .catch((err) =>{
  // Network interruption or failure execution statement })
// post
let url = 'address'
this.$(url,{
 // Parameter information})
 .then((res) => {
  // Execute the statement after success })
 .catch((err) =>{
  // Network interruption or failure execution statement })

Perhaps asynchronously can better solve the user experience in the current process, loading first and then popping up. But there is always a scenario where we need a lot of content to process and there is a clear sequential execution relationship before and after, so asynchronous communication may cause unnecessary problems for you. So, solve the problem of applicationasync/awaitSolve asynchronous communication problems

Create a new file next to it

//

Introducing axios

import axios from 'axios'

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

export default http

and introduced at the entrance

// Introduce http requestimport http from './'
.$http = http

Now available on the page

// Use in vue// get
async login () {
 let url = 'address'
 let params = {} // Parameters let res = await this.$(url,params)
}
// post
async login () {
 let url = 'address'
 let params = {} // Parameters let res = await this.$(url,params)
}

async is placed in front of the method

It's OK to put await in front of $http

Word Schematic:

async: asynchronous.
await: Wait.

Summarize

The above is what the editor introduces to you to solve the problem of VUE cross-domain Axios asynchronous communication. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!