作者|杰斯克森来源|达达前端小酒馆1什么是axios？理解并使用它，你对axios发送请求的两种方式了解多少，如何解决涉及axios的跨域问题。对于axios网络交互，在使用axios的时候首先要了解它是什么以及如何使用。说到axios网络交互，也就是发送请求，上面有两种方式，一种是发送GET请求，一种是发送POST请求。解决axios的跨域问题。2如果要用axios，是不是需要理解和解释一下。Axios是一个基于Promise的HTTP库，可以在浏览器和节点环境中使用。在应用中，向服务器发送Ajax请求，同时获取对应的HTTP请求响应库。我们为什么用它？它有什么好处。可单独使用，支持PromiseAPI，解决JavaScript“回调地狱”问题，可发送cookies、HTTP认证、并发请求、请求响应拦截、取消请求等，自动转换json数据，适用于restfulapi场景。vue中使用ajax从server端获取数据，前后端分离。后端负责提供API请求接口，前端使用Ajax获取服务器数据。服务器端api接口一般使用restfulapi。Ajax获取数据的两种方式：XMLHTTPRequest对象提供的Ajax方法JQuery3明白axios是什么？它有什么作用以及如何使用它？使用axios，它被广泛使用，可以在vuecli以及非vuecli应用程序中使用。用例有两种，一种是在vuecli应用中使用axios，一种是在vue文件中使用。第一种情况，在vuecli应用中，需要先创建vuecli应用，然后安装axios，再配置axios，就可以使用了。如何安装axios：使用npm或yarn，或者，使用vue安装axios。安装完成后，plugins目录下会有一个axios.js文件，然后在入口文件中导入plugins插件。//main.jsimport'./plugins/axios'使用axios获取网络数据：//实例创建：function(){constapp=this;axios.get('interface').then(res=>{app.users=res.data.data;});}在vue文件中使用axios，导入vue.js文件和axios.js文件，并使用axios发送Ajax请求。script(importvue.js)script(importaxios.js)created:function(){//创建vue实例，axios获取数据axios.get('interface').then(function(res){console.log(res.data);}).catch(function(error){console.log(error);});}发送请求一般分为：发送GET请求，发送POST请求：GET传输，有两种写法请求参数，一种是直接在url中添加参数，另一种是使用parmas属性添加GET参数。//urlaxios.get('...?name=da').then(function(response){console.log(response.data);this.user=response.data.data;}).catch(function(error){console.log(error);});//参数属性axios.get('...',{params:{name:'dada'}}).then(function(response){console.log(response.data);this.users=response.data.data;}).catch(function(error){console.log(error);});发送发帖请求：button(@click="addage")addage:function(){constapp=this;让参数=新的URLSearchParams();params.append('age1',1);axios.post('url...',params).then(function(res){console.log(res.data);});}json格式：module.exports=function(app){//配置jsonapp.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));};adduser:function(){consotapp=this;axios.post('interface',{name:'dada',age:1}).then(function(res){console.log(res.data);});}if(res.data.status){//数据插入成功app.user.push(res.data.data);}4跨域问题什么是跨域问题就是访问其他域的资源会有问题，但是访问不会有问题同一个域。如何解决这个问题就叫做跨域问题。采用的解决方案：一是通过vue框架配置跨域访问，二是修改node程序通过server端实现跨域问题。在vue框架的vue.config.js中，配置代理服务器。module.exports={devServer:{proxy:'域名'}};//代理服务器处理created:function(){constapp=this;axios.get('/users').then(res=>{app.users=res.data.data;});}设置多个跨域请求代理，但是生产环境有问题，还是会出现跨域问题。module.exports={devServer:{//多个代理请求proxy:{"/api":{target:'http://...',pathRewrite:{"^/api":}}}};created:function(){constapp=this;axios.get('api/users').then(res=>{app.users=res.data.data;});}server端支持跨域访问expressserverside，启用cors，跨域资源共享，启用前需要安装cors跨域支持模块，并引入constcors=require('cors')。然后添加中间件：app.use(cors())。??别忘了留下学习的足迹【点赞+收藏+评论】AuthorInfo:【作者】：Jeskson【原创公众号】：达达前端小酒馆。【福利】：公众号回复“信息”，送自学资料大礼包（进群分享，想要什么就说，看我有没有）！【转载说明】：转载请注明出处，谢谢合作！~大前端开发，定位前端开发技术栈博客，PHP背景知识点，web全栈技术领域，数据结构与算法，网络原理等以通俗易懂的方式呈现给小伙伴方式。感谢您的支持，感谢您的厚爱！！！如本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎来到达达的CSDN！这是一个有品质有态度的博客
