如何有效处理Vue项目中Axios的跨域异步通信难题？

本文共计754个文字，预计阅读时间需要4分钟。

在项目中，经常需要从后端获取数据内容。特别地，在前后端分离的情况下，前端已经完成了工程化部署，跨域请求需要前端准备相关技术点。解决方案众多。在Vue开发中，当前可使用的方法有：

在项目中，常常需要从后端获取数据内容。特别是在前后端分离的时候，前端进行了工程化部署，跨域请求成了一个前端必备的技能点。好在解决方案很多。

在vue中，在开发中，当前使用较多的是axios进行跨域请求数据，但不少人遇到如下问题：

•异步通信，无法同步执行
•无法集中管理
•不便阅读
•还未请求成功就调转了
•then里面的逻辑越来越繁杂

以往的网络请求的写法如下：

// main.js // 引入axios import axios from 'axios' Vue.prototype.$axios = axios; // vue页面中的使用 // get let url = '地址' this.$axios.get(url,{ params:{} // 参数信息 }) .then((res) => { // 成功后执行语句 }) .catch((err) =>{ // 网络中断或失败执行语句 }) // post let url = '地址' this.$axios.post(url,{ // 参数信息 }) .then((res) => { // 成功后执行语句 }) .catch((err) =>{ // 网络中断或失败执行语句 })

或许在目前的过程中异步能够更好的解决用户体验感，先加载后弹出。