axios网络交互应用-Vue

作者|杰斯克森来源|达达前端小酒馆Axios是一个承诺-基于可在浏览器和node.js中使用的HTTP库，可以提供以下服务：1、从浏览器创建XMLHttpRequests2、从node.js创建http请求3、支持PromiseAPI4，拦截请求和响应5、转换请求数据和Response数据6.取消请求7.自动转换JSON数据8.客户端支持防御XSRFVue安装axios插件的命令是什么？axios安装：安装命令；npminstallaxiosget：一般用于获取数据　post：主要是提交表单数据和上传文件put更新所有数据这个请求和post类似，只是请求方式不同patchonlyforchanged数据更新这个请求类似post，只是请求方式不同。删除请求参数可以放在url上，也可以像post一样放在请求体中。axios是对ajax请求的封装。Asynchronousobjectvarajax=newXMLHttpRequest();//第二步：设置请求的url参数。第一个参数是请求的类型，第二个参数是请求的url，可以有参数，动态传递参数starName给服务器ajax.open('get','http://...');//第三步：发送请求ajax.send();//第四步：注册事件onreadystatechange状态改变会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//Step5如果能进入这个判断，说明数据已经完美返回，请求的页面存在console.log(ajax.responseText);//输入相应的内容}}//创建anasynchronousobjectvarxhr=newXMLHttpRequest();//设置请求类型和url//打开xhrxhr.open('post','http://...');//post请求必须添加请求头，否则会报错//设置请求头，请求头必须在xhr打开后，发送前设置xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送请求xhr.send();xhr.onreadystatechange=function(){//这一步是判断服务器是否正确响应if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText);}};//为axios设置baseURLaxios.defaults.baseURL='https:,api';leturl=/film/getList';axios.get(url).then(res=>{console.log(res);})//设置请求头axios.defaults.headers['sessionToken']='asd234';同源策略：跨域的产生来自于现代浏览器一般的'同源策略'，所谓同源策略，是指只有当地址：协议名、域名、端口名相同时，允许访问同一个cookie、localStorage或者发送Ajax请求等，如果是从不同的源访问，就叫跨域。如何解决axios跨域问题？解决方法：服务器（后台）设置允许跨域浏览器设置cross-domainthroughproxy允许跨域header('Access-Control-Allow-Origin:*');//允许所有源访问header('Access-Control-Allow-Method:POST,GET');//允许访问的拦截器分为：请求（request）拦截器和响应（response）拦截器通过axios.create创建axios实例//创建axios对象let$axios=axios.create({baseURL:'http://...'})request（请求）拦截器//在发送之前拦截request-request$axios.interceptors.request.use(res=>{//添加请求头res.headers.sessionToken='as423424..';returnres;})Response（响应）拦截器//数据返回后拦截response-response$axios.interceptors.response.use(function(res){if(res.data.code==='200'){returnres.data;}else{alert(res.data.msg);}},function(error){alert('网络异常');})记得分享！??别忘了留下学习的足迹【点赞+收藏+评论】作者信息：【作者】：Jeskson【原创公众号】：达达前端小酒馆。【福利】：公众号回复“信息”，送自学资料大礼包（群里分享，想要什么就说，看我有没有）！【转载说明】：转载请注明出处，谢谢合作！~大前端开发，定位前端开发技术栈博客，PHP背景知识点，web全栈技术领域，数据结构与算法，网络原理等以通俗易懂的方式呈现给小伙伴方式。感谢您的支持，感谢您的厚爱！！！如本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎来到达达的CSDN！这是一个有品质有态度的博客