一、介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 官方资料和介绍

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

二、Axios的基本使用

1、Axios安装方法

使用npm:

$ npm install axios

使用bower:

$ bower install axios

使用cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、axios项目配置准备

$ npm init --yes
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
} $ npm install vue -S;npm install axios -S
code@1.0.0 /Users/hqs/PycharmProjects/vue_study/04-axios的基本使用/code
└── vue@2.6.10 code@1.0.0 /Users/hqs/PycharmProjects/vue_study/04-axios的基本使用/code
└─┬ axios@0.18.0
├─┬ follow-redirects@1.7.0
│ └─┬ debug@3.2.6
│ └── ms@2.1.1
└── is-buffer@1.1.6

3、服务端配置准备

# 1.pip3 install Flask
# 2.python3 server.py import json from flask import Flask
from flask import request
from flask import Response app = Flask(__name__) # 默认是get请求
@app.route("/")
def index():
resp = Response("<h2>首页</h2>")
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp @app.route("/course")
def courses():
resp = Response(json.dumps({
"name": "alex"
}))
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp @app.route("/create", methods=["post",])
def create():
print(request.form.get('name')) with open("user.json", "r") as f:
# 将数据反序列化
data = json.loads(f.read()) data.append({"name": request.form.get('name')}) with open("user.json", "w") as f:
f.write(json.dumps(data)) resp = Response(json.dumps(data))
resp.headers["Access-Control-Allow-Origin"] = "*" return resp if __name__ == '__main__':
app.run(host="localhost", port=8800)

服务端代码如上所示,再编辑user.json文件如下:

[{"name": "alex"}]

4、axios发送请求

<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data(){
return {
msg: ''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<div v-html="msg"></div>
<button @click="sendAjaxByPost">发post请求</button>
</div>
`,
methods:{
sendAjax(){
// 发送get请求
axios.get("http://127.0.0.1:8800/"
).then(res=>{
console.log(res.data); // <h2>首页</h2>
console.log(typeof res.data); // string
this.msg = res.data;
}).catch(err=>{ // 有参数括号可以不写
console.log(err);
})
},
sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
axios.post('http://127.0.0.1:8800/create', params
).then(function (res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}
}; new Vue({
el: "#app",
data(){
return { }
},
components:{
App
},
template: `<App/>`
})
</script>
</body>

(1) 发起一个GET请求

methods:{
sendAjax(){
// 发送get请求
axios.get("http://127.0.0.1:8800/"
).then(res=>{
console.log(res.data); // <h2>首页</h2>
console.log(typeof res.data); // string
this.msg = res.data;
}).catch(err=>{ // 有参数括号可以不写
console.log(err);
})
}
}

点击发送get请求的按钮,console输出的实例化对象如下所示:

(2)发起一个POST请求

methods:{
sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
axios.post('http://127.0.0.1:8800/create', params
).then(function (res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}

点击发送post请求,console输出的实例化对象如下所示:

user.json文件内容变化为如下内容:

[{"name": "alex"}, {"name": "hqs"}]

5、axios的默认配置

vue和axios都是全局对象,未来axios会成为局部作用域.可以给Vue的原型挂载一个属性$axios:

Vue.prototype.$axios = axios;

此时我们就可以在任意组件中通过this.$axios获取到当前的axios实例。

<!--vue和axios都是全局对象,未来axios会成为局部作用域-->
<script type="text/javascript">
// 挂载,给Vue的原型挂载一个属性$axios,使用插件
Vue.prototype.$axios = axios;
// 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800'; var App = {
data(){
return {
msg: ''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<div v-html="msg"></div>
<button @click="sendAjaxByPost">发post请求</button>
</div>
`,
methods:{
sendAjax(){
// 发送get请求,直接拼接公共Url
this.$axios.get("/"
).then(res=>{
console.log(res.data); // <h2>首页</h2>
console.log(typeof res.data); // string
this.msg = res.data;
}).catch(err=>{ // 有参数括号可以不写
console.log(err);
})
},
sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
this.$axios.post('/create', params
).then(function (res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}
};
// 代码省略
</script>

6、使用axios的this指向问题

在前端框架中一定要使用箭头函数,不建议使用es5中的普通函数,因为它会使this的指向发生改变。

(1)this指向问题现象

<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script> <!--vue和axios都是全局对象,未来axios会成为局部作用域-->
<script type="text/javascript">
// 挂载,给Vue的原型挂载一个属性$axios,使用插件
Vue.prototype.$axios = axios;
// 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800'; var App = {
data(){
return {
msg: '',
datas: [] }
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<div v-html="msg"></div>
<button @click="sendAjaxByPost">发post请求</button>
{{datas}}
</div>
`,
methods:{
sendAjax(){
// 发送get请求,直接拼接公共Url
this.$axios.get("/"
).then(res=>{
console.log(res.data); // <h2>首页</h2>
console.log(typeof res.data); // string
this.msg = res.data;
}).catch(err=>{ // 有参数括号可以不写
console.log(err);
})
},
sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
this.$axios.post('/create', params
).then(function (res) {
console.log(res);
console.log(this); // 输出window示例对象(自动转化为windows对象)
// 初学者易犯的错
this.datas = res;
}).catch(err=>{
console.log(err);
})
}
}
}; new Vue({
el: "#app",
data(){
return { }
},
components:{
App
},
template: `<App/>`
})
</script>
</body>

回调函数中的this从axios改为了windows,console输出如下所示:

(2)使用箭头函数解决this指向问题

在vue中使用函数时,推荐使用箭头函数可以解决this的指向问题。

sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
this.$axios.post('/create', params
).then((res)=> {
console.log(res);
console.log(this);
// 初学者易犯的错
this.datas = res;
}).catch(err=>{
console.log(err);
})
}

点击发送post请求按钮,显示效果如下所示:

(3)使用局部变量解决this指向问题(不推荐)

sendAjaxByPost(){
var _this = this;
var params = new URLSearchParams();
params.append('name', 'hqs');
// 发送post请求
this.$axios.post('/create', params
).then(function (res) {
console.log(res);
console.log(this);
// 初学者易犯的错
this.datas = res;
}).catch(err=>{
console.log(err);
})
}

Axios介绍和使用的更多相关文章

  1. Vuex与axios介绍

    Vuex集中式状态管理里架构 axios (Ajax) Vuex集中式状态管理架构 -简单介绍: vuex是一个专门为Vue.js设计的集中式状态管理架构. 我们把它理解为在data中需要共享给其他组 ...

  2. axios介绍与使用说明 axios中文文档

    本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...

  3. axios介绍

    原文地址:lewis1990@amoy axios 基于promise用于浏览器和node.js的http客户端 特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响 ...

  4. vue项目中关于axios的简单使用

    axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...

  5. Axios 是一个基于 promise 的 HTTP 库

    Axios 是一个基于 promise 的 HTTP 库 vue项目中关于axios的简单使用 axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.j ...

  6. (生产)axios - 请求接口

    参考:https://www.awesomes.cn/repo/mzabriskie/axios axios 介绍 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中 ...

  7. promise和axios

    1.接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的 ...

  8. Reactjs之Axios、fetch-jsonp获取后台数据

    1.新增知识点 /** Axios获取服务器数据(无法跨域,只能让后台跨域获取数据) react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数 ...

  9. axios 如何取消已发送的请求?

    前言 最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数据,这就会造成数据和我选择的内容不一致的问题.解决的方案:在后续发送请求时,判断之前的 ...

随机推荐

  1. 2016级算法第二次上机-C.AlvinZH的儿时梦想——坦克篇

    872 AlvinZH的儿时梦想----坦克篇 思路 简单题.仔细看题,题目意在找到直线穿过的矩形数最小,不能从两边穿过.那么我们只要知道每一行矩形之间的空隙位置就可以了. 如果这里用二维数组记住每一 ...

  2. Windows下安装Redis服务(zip)

    1.官方没有 Windows版本的 Redis,官网介绍: Redis项目不正式支持Windows.但是,微软开发并维护了针对Win64的Windows版本. 2.Windows版本下载地址:http ...

  3. 安装Termux的手机上运行Python

    1. Termux 终端 Android是一个单用户图形化系统,功能主要以应用的形式呈现给用户,因此在系统上我们无法直接获取终端,更是无法直接调用系统自带的丰富指令.使用ADB是一个曲线救国的方法,打 ...

  4. Git服务器搭建笔记

    前言:最近公司要使用git服务器对Android4.4的源码进行版本控制,所以花了些时间在Ubuntu14.04上搭建了git服务器,正好前段时间也学习了下git的使用哈哈 ------------- ...

  5. Dynamics CRM 365常用js记录。

    var entityname =window.parent.Xrm.Page.data.entity.getEntityName();//获取实体名称 var sampid = window.pare ...

  6. 分分钟钟学会Python - 数据类型(dict)

    今日内容 字典(dict) 具体内容 1.字典含义 帮助用户去表示一个事物的信息(事物是有多个属性). 基本格式 data = {键:值,键:值,键:值,键:值,键:值,键:值,} # 练习题 use ...

  7. Sqlite shell 的使用

    学习python中,涉及SQLite3数据库的操作,其中一种是使用sqlite shell,在园子里找到下面这篇文章,跟着试了下,挺好. 这里要注意,语句是C语言规范的吧,语句末尾需要";& ...

  8. Servlet入门小案例

    案例一:tomcat9.jdk1.8 1.eclipse创建web项目 1)创建一个Dynamic web project,名字为Servlet_hjh 2)在src下创建一个包,为com.hjh.d ...

  9. vue移动端更改手机物理按键返回问题

    又是一天见面的日子,春季盎然~ 已经无法在继续抒情下去了,写作水平骤降!! 今天记录下应用cordva+vue生成的apk 在手机物理返回时遇到的问题: 前提说~~应用vue,我们可以自定义上一路径和 ...

  10. 配置mybatis解决log4j未正常打印sql的问题

    在mybatis-config.xml中增加配置: <settings> <setting name="logImpl" value="STDOUT_L ...