解决vue跨域axios异步通信

在项目中,常常需要从后端获取数据内容。特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点。好在解决方案很多。
在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) =>{
    // 网络中断或失败执行语句
  })

或许在目前的过程中异步能够更好的解决用户体验感,先加载后弹出。但总有那么一个场景我们需要大量的内容进行处理,而且前后有明显的顺序执行的关系,那么异步通信可能会对你造成不必要的问题。所以,解决运用async/await解决异步通信问题

main.js旁边新建http.js文件

// http.js

引入axios
import axios from 'axios'

var http = {
  // get 请求
  get: function(url,params){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
        .then((response) =>{
          resolve(response.data)
        })
        .catch((error) => {
          reject( error )
        })
    })
  }
  // post 请求
  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

并在main.js入口引入

// 引入http请求
import http from './http.js'
Vue.prototype.$http = http

现在就可以在页面中使用了

// 在vue中使用

// get
async login () {
  let url = '地址'
  let params = {} // 参数
  let res = await this.$http.get(url,params)
}
// post
async login () {
  let url = '地址'
  let params = {} // 参数
  let res = await this.$http.post(url,params)
}

async 放在方法前面
await 放在$http前面就OK了

单词示意:
async:异步。
await:等待。

原文地址:https://www.cnblogs.com/lianjy/p/10721374.html

时间: 2024-11-10 12:46:43

解决vue跨域axios异步通信的相关文章

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin. 今天一个Ajax跨域问题,纠结我半天,记录之. <html> <head> <title>title</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>

解决浏览器跨域限制发送ajax请求

一.什么是浏览器跨域限制?本质是什么? 所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器跨域访问数据的策略,这是一中约定,正式叫法为浏览器同源策略,目前已经在大多数浏览器中支持. 本质上,所谓浏览器同源策略即:不允许浏览器访问跨域的Cookie,ajax请求跨域接口等.也就是说,凡是访问与自己不在相同域的数据或接口时,浏览器都是不允许的. 最常见的例子:对于前后端完全分离的Web项目,前端页面通过rest接口访问数据时,会出现如下问题: 不允许发送POST请求:在发

深入浅出JSONP:解决AJAX跨域问题

本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问. 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的.由于又购买了新的服务器,客户想把web主页和那个后台程序分开来,后台程序被部署到了新的服务器上.不过这个项目是我的同事小福同志开发的,也就由

用iframe设置代理解决ajax跨域请求问题

面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域?简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在

.net mvc webapi 解决前端跨域问题

跨域问题的原因不解释了,直接设置两步就可以解决前端跨域问题 1.Gloabel.asax文件中 //解决跨域问题 protected void Application_BeginRequest(object sender, EventArgs e) { RegisterRoutes(RouteTable.Routes); if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Resp

如何解决ajax跨域问题(转)

最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在

说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决. 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.而这就是本文将要讲述的内容. JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互

webapi 解决ajax跨域请求问题

webapi在配置文件中加入这几句就可以解决浏览器跨域请求调用的问题?为什么呢? <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <modules runAllManagedModulesForAllRequests="true" /> <httpProtocol> <customHeaders> &

如何解决ajax跨域问题

如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为