解决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
:等待。
解决vue跨域axios异步通信的更多相关文章
- 解决Vue跨域问题 : 正向代理与反向代理
你需要做一个反向代理的东西 ===> 打开你的vue项目的config文件夹下的index.js 找到以下代码 dev: { proxyTable: { '/api': { target: ...
- 解决vue跨域问题
package com.qmtt.config; import java.io.IOException; import javax.servlet.Filter; import javax.servl ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- vue 跨域 springCloud @CrossOrigin注解
vue 跨域 springCloud @CrossOrigin注解 一丶什么是跨域 跨域问题来源于浏览器的同源策略,浏览器为了提高网站的安全性,在发送ajax请求时,只有在当前页面地址与请求地址的协 ...
- 如何用Nginx解决前端跨域问题?
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...
- vue跨域问题解决(生产环境)
vue跨域问题解决(使用webpack打包的) 配置代理:(config下index.js文件) module.exports = { dev: { env: require('./dev.env') ...
- vue跨域处理
本人对于vue跨域处理流程不是很清楚,特此理顺一遍. 1.在config中进行配置,该文件不是都存在,需要自己建: proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化 ...
- 解决cookie跨域访问
一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...
- 如何解决ajax跨域问题(转)
由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...
随机推荐
- Spring Boot—06集成前端模板thymeleaf
Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性 pom.xml <dependency> <groupId& ...
- 应用Python处理空间关系数据
from osgeo import ogrimport jsonfrom geojson import loads, dumps, Feature, FeatureCollectionfrom sha ...
- 有用的linux指令(资料转载)
对 Linux 新手非常有用的20个命令 你打算从Windows换 ...
- 一步一步pwn路由器之uClibc中malloc&&free分析
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 栈溢出告一段落.本文介绍下 uClibc 中的 malloc 和 ...
- Latex 数学公式使用入门
Latex 数学公式使用示例 Latex 数学公式命令中,数学符号都使用反斜杠(backslash, '\')转义英文缩略词 , 一些简单的数学符号命令: 其使用大括号(curly braces, ' ...
- selenium&phantomjs实战--漫话爬取
为什么直接保存当前网页,而不是找到所有漫话链接,再有针对性的保存图片? 因为防盗链的原因,当直接保存漫话链接图片时,只能保存到防盗链的图片. #!/usr/bin/env python # _*_ c ...
- Win10自动重启原因怎么查Windows10无故自动重启
电脑偶尔自动重启,可能很少用户会在意,若电脑经常无故重启,那么应该怎么办,怎么查找电脑无故自动重启原因呢?下面就以Windows10系统自动重启为例,来查查WIN10无故重启是什么原因导致.百度经验: ...
- 避免重复插入数据sql server
insert into TN_JOBS(JAVA_ID,SERVER_IP,SERVER_PORT,JOB_CODE,JOB_NAME,JOB_START_TIME,JOB_MSG,JOB_STATU ...
- [转]Hadoop 读写数据流
Hadoop文件读取 1)客户端通过调用FileSystem对象中的open()函数来读取它做需要的数据.FileSystem是HDFS中DistributedFileSystem的一个实例. 2)D ...
- 到底该用img还是background-image?
在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片.这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式实现,哪种更好呢? 一般情况下,可能就是 ...