一篇文章带你了解axios网络交互-Vue

作者 | Jeskson

来源 | 达达前端小酒馆

1

什么是axios呢?了解,并去使用它,对于axios发送请求的两种方式有何了解,以及涉及axios跨域问题如何解决。

对于axios网络交互,去使用axios的同时,首先你要了解它是什么,如何使用才是。说axios网络交互,即发送请求,前面说两种方法,一为发送GET请求,二为POST请求。

解决axios跨域问题。

2

要想使用axios,是不是要了解它呢,讲解一下它。axios是基于Promise的HTTP库,可以用在浏览器和node环境中,在应用程序中,向服务器端发送Ajax请求同时获取服务器端相应的HTTP请求响应库。

我们为什么使用它呢?它的好处有哪些。可以单独使用,支持Promise API,解决了JavaScript“回调地狱”的问题,可以发送Cookie,HTTP认证,并发请求,请求和响应的拦截,取消请求等,自动转换json数据,适用于restful api场景。

在vue中通过Ajax从服务器端获取数据,前后端分离,后端负责提供api请求接口,前端用Ajax获取服务器数据。服务器端的api接口,一般使用restful api。

使用Ajax获取数据两种方式:

XMLHTTPRequest对象JQuery提供的Ajax方法

3

了解axios的是什么?做什么了,如何使用它呢?使用axios,它的使用很广泛,可以在vue cli中使用,也可以在非Vue cli应用中使用。分两种使用情况,一,在vue cli应用程序中使用axios,二,在vue文件中使用。

第一种情况下,在vue cli应用程序中,那么就要创建vue cli应用程序,然后安装axios,接着配置axios,就可以使用了。

安装axios的方法:

使用Npm或yarn,或者是,使用vue安装axios。

安装完成后,会在插件目录既是plugins中,有axios.js文件,然后在入口文件引入该插件plugins插件。

// main.js import ./plugins/axios

使用axios可以获取网络数据:

// 实例 created: function(){ const app = this; axios.get(接口).then(res=>{ app.users = res.data.data; }); }

在vue文件中使用axios,引入vue.js文件和axios.js文件,使用axios发送Ajax请求。

script(导入vue.js) script(导入axios.js) created: function(){ // 创建vue实例,axios获取数据 axios.get(接口).then(function(res){ console.log(res.data); }).catch(function(error){ console.log(error); }); }

发送请求

一般分:发送GET请求,和发送POST请求:

GET传递,请求参数有两种写法,一种是直接在url中附加参数,一种是使用parmas属性添加GET参数。

// url axios.get(...?name=da).then(function(response){ console.log(response.data); this.user = response.data.data; }).catch(function(error){ console.log(error); }); // parmas属性 axios.get(..., { params: { name: dada } }) .then(function(response){ console.log(response.data); this.users = response.data.data; }).catch(function(error){ console.log(error); });

发送post请求:

button(@click="addage") addage: function(){ const app = this; let params = new URLSearchParams(); params.append(age1, 1); axios.post(url..., params).then(function(res){ console.log(res.data); }); }

json格式:

module.exports = function(app){ // 配置json app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); }; adduser: function(){ consot app = this; axios.post(接口,{ name: dada, age: 1 }).then(function(res){ console.log(res.data); }); } if(res.data.status){ // 数据插入成功 app.user.push(res.data.data); }

4

跨域问题

什么是跨域问题,就是访问其他域中的资源会出现问题,而访问相同的域不会出现问题,如何解决这种问题,这个问题就叫做跨域问题。

使用的解决方法:

第一种是通过vue框架来配置跨域访问,第二种事通过服务器端,修改node程序来实现跨域问题。

在vue框架中的vue.config.js中,配置代理服务器。

module.exports = { devServer: { proxy: 域名 } }; // 代理服务器处理 created:function(){ const app = this; axios.get(/users).then(res=>{ app.users=res.data.data; }); }

设置多个跨域请求的代理,但是在生产环境中存在问题,还是会有跨域问题。

module.exports = { devServer: { // 多个代理请求 proxy: { "/api":{ target: pathRewrite:{ "^/api": } } }}; created: function(){ const app = this; axios.get(api/users).then(res=>{ app.users=res.data.data; }); }

服务器端支持跨域访问

express服务器端,开启cors,跨域资源共享,开启前,要安装cors跨域支持模块,引入const cors = require(cors)。

然后添加中间件:app.use(cors())即可。

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson

【原创】:达达前端小酒馆。

【福利】:回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)!

【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客