作者 | 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！
这是一个有质量，有态度的博客