来源:滁州SEO

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())即可。

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

一篇文章带你了解axios网络交互-Vue的更多相关文章

  1. 一篇文章带你用Python网络爬虫实现网易云音乐歌词抓取

    前几天小编给大家分享了数据可视化分析,在文尾提及了网易云音乐歌词爬取,今天小编给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下: 找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌 ...

  2. 一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接

    [一.项目背景] 相信大家都有一种头疼的体验,要下载电影特别费劲,对吧?要一部一部的下载,而且不能直观的知道最近电影更新的状态. 今天小编以电影天堂为例,带大家更直观的去看自己喜欢的电影,并且下载下来 ...

  3. 一篇文章带你搞定 ElasticSearch 术语

    这篇文章主要介绍 ElasticSearch 的基本概念,学习文档.索引.集群.节点.分片等概念,同时会将 ElasticSearch 和关系型数据库做简单的类比,还会简单介绍 REST API 的使 ...

  4. 一篇文章带你看懂Cloudflare信息泄露事件

    版权声明:本文由贺嘉  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/753847001488039974 来源:腾云阁  ...

  5. (71)一篇文章带你熟悉HTTP协议

    作者:涤生_Woo链接:http://www.jianshu.com/p/6e9e4156ece3來源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本篇文章篇幅比较长,先 ...

  6. (70)一篇文章带你熟悉 TCP/IP 协议

    作者:涤生_Woo链接:http://www.jianshu.com/p/9f3e879a4c9c來源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 同样的,本文篇幅也比较 ...

  7. 一篇文章带你吃透,Java界最神秘技术ClassLoader

    ClassLoader 是 Java 届最为神秘的技术之一,无数人被它伤透了脑筋,摸不清门道究竟在哪里.网上的文章也是一篇又一篇,经过本人的亲自鉴定,绝大部分内容都是在误导别人.本文我带读者彻底吃透 ...

  8. [转载] 一篇文章带你了解Paxos算法

    原文: http://dockone.io/article/640 [编者的话]本文是Quora上关于Paxos算法的回答,两位答者分别从不同的角度描述Paxos算法.Vineet Gupta的回答细 ...

  9. 一篇文章带你快速入门createjs

    开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看.   createjs简介 官网:http://www.createjs.cc/ createjs中包 ...

随机推荐

  1. EDA系列学习

    发布这系列的EDA课程VHDL实验是因为有着和单片机系列同样的理由,另外,这个系列的文档只进行过波形图仿真,部分的程序可能不能在硬件上运行. 目录 实验二 8位加法器设计 实验三 组合逻辑电路的VHD ...

  2. IOS第七天(1:UiTableView 的基本用法)

    ***表格控件 #import "HMViewController.h" @interface HMViewController () <UITableViewDataSou ...

  3. F面经prepare:strstr变种

    * Given an integer k>=1 and two strings A and B (length ~n each); * Figure out if there is any co ...

  4. POJ 2155 Matrix (二维线段树入门,成段更新,单点查询 / 二维树状数组,区间更新,单点查询)

    题意: 有一个n*n的矩阵,初始化全部为0.有2中操作: 1.给一个子矩阵,将这个子矩阵里面所有的0变成1,1变成0:2.询问某点的值 方法一:二维线段树 参考链接: http://blog.csdn ...

  5. Angular随笔第二课

    一.  列表表格以及其它迭代型元素 ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝.不管在什么地方,只要你想创建一组事物的列表,你就可以使用这 ...

  6. HDU_5504 GT and sequence

    GT and sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  7. 百度地图API,展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  8. iOS 6 新的快捷初始化写法

    转:http://www.2cto.com/kf/201408/328974.html 下列简化写法是IOS6.0以后的新写法 NSNumber //简化前的写法: NSNumber *value1; ...

  9. 读DataSnap源代码(一)

    Delphi的DataSnap用了一段时间了,但一直感觉有些地方还不够了解,所以花时间阅读了源代码,特作此烂笔头. Datasnap是在之前的WebBorker基础上搭建的,DataSnap向导自动生 ...

  10. clip-path 教程:使用 CSS 中的 clip-path 轻松实现多边形

    作为一个前端开发,一个主要的工作就是来实现设计师设计的UI界面.而在UI界面中,各种各样的形状元素应用则是随处可见,比如三角形: 以前碰到这种形状的时候,会使用各种黑科技的技巧,比如使用CSS中的bo ...