解决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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jQuery基础知识小结
Dec 22 Javascript
jQuery 选择器详解
Jan 19 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JS 5种遍历对象的方式
Jun 16 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
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
详解Django的CSRF认证实现
2018/10/09 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python调用staf自动化框架的方法
2018/12/26 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python3图片文件批量重命名处理
2019/10/31 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
通用C#笔试题附答案
2016/11/26 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
大学同学聚会邀请函
2014/01/29 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
装修设计师求职信
2014/02/26 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
个人四风对照检查材料
2014/09/26 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
家长通知书家长意见
2015/06/03 职场文书