解决vue跨域axios异步通信问题


Posted in Javascript onApril 17, 2019

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

 在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:等待。

总结

以上所述是小编给大家介绍的解决vue跨域axios异步通信问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
vue.js中created方法作用
Mar 30 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 #Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 #Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
Vue组件系列开发之模态框
2019/04/18 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python实现k-means算法
2018/02/23 Python
Python多进程原理与用法分析
2018/08/21 Python
Python os.access()用法实例
2019/02/18 Python
python中eval与int的区别浅析
2019/08/11 Python
python开根号实例讲解
2020/08/30 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
长辈证婚人证婚词
2014/01/09 职场文书
简短大学毕业感言
2014/01/18 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
高中生操行评语大全
2014/04/25 职场文书
倡议书格式
2014/08/30 职场文书
骨干教师申报材料
2014/12/17 职场文书
总经理助理岗位职责
2015/01/31 职场文书
投标售后服务承诺书
2015/04/29 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
交通安全教育主题班会
2015/08/12 职场文书