如何解决Vue项目中使用axios进行跨域异步通信的问题？

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

在项目中，常常需要从后端获取数据内容。特别地，在后端分离的情况下，前端已进行工程化部署，实现了跨域请求的前端准备功能。解决方案众多。在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) =>{ // 网络中断或失败执行语句 })

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