文档章节

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

达达前端
 达达前端
发布于 2019/12/21 23:36
字数 1341
阅读 30
收藏 0

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!

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

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

vue-cli项目中使用mockjs模拟数据

为何 之前写过一篇文章vue-cli项目中怎么mock数据?,虽然这种方法不错,但是显然存在一个很明显的弊端,那就是要自己手写数据,因此我现在推荐大家使用mockjs,至于好处大家就手动点进去了解...

daydreammoon
2018/05/28
0
0
vue实践之采用vue-cli3.x创建项目

采用vue创建项目的时候控制台提示需要升级,于是就笨头笨脑的升级了,结果采用vue-cli3创建项目的时候出了一堆错误,顿时懵了。于是开始了解vue-cli3.x的相关知识,刚开始还是好不习惯,不过...

陨石坠灭
2019/07/29
0
0
尤雨溪 6 月 4 日的 Vue 技术分享全文奉上

尤大于 6 月 4 日,在深圳某科技公司做了一次 Vue 相关的技术分享。这里我将 PPT 分享给大家。 图中对应的链接我也已经整理在相关图文的下方。 Vue 团队成员简介:vuejs.org/v2/guide/te… ...

小生方勤
2019/06/05
0
0
当大多数人对Vue理解到炉火纯青的时候,你应该思考怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
2018/08/16
0
0
关于Android工程师转成vue的三两事儿(1)--数据的配置

我刚开始选择职业方向的时候我是主要想主攻android的,但是由于现在所在的公司正处于业务转型期:公司由以往主要做android平板定制任务到现在准备往前端等互联网上面转型。外加上我对很多语言...

klivitamJ
2019/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

植物:君子兰

ylbtech-植物:君子兰 君子兰(学名: Clivia miniata),别名 剑叶石蒜、大叶石蒜,是 石蒜科 君子兰属的 多年生草本植物,属观赏 花卉,原产于 南非南部。 花期长达30-50天,以冬春为主,元...

osc_gp8avabl
3分钟前
17
0
植物:玉簪

ylbtech-植物:玉簪 玉簪(学名: Hosta plantaginea (Lam.) Aschers.),又名 白萼、白鹤仙,是 百合科,玉簪属的 多年生宿根植物。叶基生,成簇,卵状心形、卵形或卵圆形。 花葶高40-80...

osc_1psr53ow
4分钟前
10
0
植物:迎春花

ylbtech-植物:迎春花 迎春花(学名: Jasminum nudiflorum Lindl. ):别名 迎春、黄素馨、金腰带,落叶 灌木丛生。株高30-500厘米。小枝细长直立或拱形下垂,呈纷披状。3小叶复叶交互对生,...

osc_fscujk71
5分钟前
14
0
植物:雪铁芋

ylbtech-植物:雪铁芋 雪铁芋(学名: Zamioculcas zamiifolia Engl.),又名为 金钱树。是多年生常绿 草本植物,是极为少见的带地下 块茎的观叶植物。地上部无主茎,不定芽从块茎萌发形成大...

osc_47qtuhkb
6分钟前
11
0
Java之关键字的使用

java中有很多的关键字,他们的使用让Java语言变得更加灵活、易用,下面将介绍Java中最常用的几个关键字并说明其用法。 关键字:return 1.使用范围: 使用在方法体中 2.作用: ① 结束方法 ②...

RealBruce
7分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部