达达前端 · 2019年12月21日

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

file

作者 | 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: 'http://...',
  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!

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

前端技术栈

推荐阅读
关注数
2
文章数
124
前端资源下载群:通告:前端开发交流群:711613774 文章 每天更新(点个赞,证明你还爱我哦,亲)友链大礼包:[链接]
目录
极术微信服务号
关注极术微信号
实时接收点赞提醒和评论通知
安谋科技学堂公众号
关注安谋科技学堂
实时获取安谋科技及 Arm 教学资源
安谋科技招聘公众号
关注安谋科技招聘
实时获取安谋科技中国职位信息