首页 / IOS / 解决vue跨域axios异步通信问题
解决vue跨域axios异步通信问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了解决vue跨域axios异步通信问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2080字,纯文字阅读大概需要3分钟。
内容图文
![解决vue跨域axios异步通信问题](/upload/InfoBanner/zyjiaocheng/333/7411f9c09bd24f5b980532e0a57889c8.jpg)
在项目中,常常需要从后端获取数据内容。特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点。好在解决方案很多。
在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跨域axios异步通信问题全部内容,希望文章能够帮你解决解决vue跨域axios异步通信问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。