49. Vue使用axios发送Ajax请求

需求

Vue.js的框架中,如果要发送ajax请求是需要借助外部库的。在vue1.0版本官方推荐的vue-resourcevue2.0版本官方推荐的axios,或者也可以使用jquery来发送ajax请求。

那么本篇章主要来介绍使用axios库来发送ajax请求。

axios介绍

Github仓库」: https://github.com/axios/axios

「中文文档」: http://www.axios-js.com/zh-cn/docs/

什么是 axios

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

安装axios

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

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

可以从上面看到,安装axios可以使用以上的5种方式。那么下面我将使用CDN的js引入方式,来写一个示例代码。

基本使用示例

1.说明

测试验证发送ajax请求,首先需要一个接收ajax的后台服务,在这里我写了一个flask的后台服务。

前端我则使用js的引入方式编写axios示例,发送get以及post请求。

那么其中post请求主要常用有两种,如下:

  • 一种是form请求格式

  • 一种是json格式

2.flask的后台服务代码

from flask import Flask, jsonify, request, make_response
import json

# 实例化app
app = Flask(import_name=__name__)

# 定义全局列表数据变量
data_list = [
{'id': 1, 'Name': '奔驰', 'Ctime': '2020-01-21 21:25:44'},
{'id': 2, 'Name': '宝马', 'Ctime': '2020-01-20 21:25:44'},
{'id': 3, 'Name': '法拉利', 'Ctime': '2020-01-19 11:25:44'},
{'id': 4, 'Name': '丰田', 'Ctime': '2020-01-18 13:25:44'},
{'id': 5, 'Name': '特斯拉', 'Ctime': '2020-01-17 15:25:44'},
]


# 删除列表数据
@app.route('/del_list', methods=["POST"])
def del_list():
# 设置返回数据
data = {
'status': 0, # 0请求成功 1请求失败
'messages': "删除成功",
}

res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
id = request.form.get('id')
print('id = %s' % (id))

# 请求数据异常,则返回失败
if id is None:
data = {
'status': 1, # 0请求成功 1请求失败
'messages': "删除失败",
}
res = make_response(jsonify(data)) # 设置响应体
res.status = '401' # 设置状态码
return res

# 将根据id删除列表list中的数据
for i in range(0, len(data_list) - 1):
item = data_list[i]

if item['id'] == int(id):
data_list.pop(i) # 删除数据

# 返回json数据
return res


# 添加列表数据 json格式
@app.route('/add_list_json', methods=["POST"])
def add_list_json():
# 设置返回数据
data = {
'status': 0, # 0请求成功 1请求失败
'messages': "添加成功",
'data': "json"
}

res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收处理json数据请求
data = json.loads(request.data) # 将json字符串转为dict
id = data['id']
name = data['name']
print('id = %s, name = %s' % (id, name))

# 请求数据异常,则返回失败
if name is None:
data = {
'status': 1, # 0请求成功 1请求失败
'messages': "添加失败",
}
res = make_response(jsonify(data)) # 设置响应体
return res

# 将数据加入到列表list中
data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 添加列表数据 form表单
@app.route('/add_list_form', methods=["POST"])
def add_list_form():
# 设置返回数据
data = {
'status': 0, # 0请求成功 1请求失败
'messages': "添加成功",
'data': "form"
}

res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
id = request.form.get('id')
name = request.form.get('name')
print('id = %s, name = %s' % (id, name))

# 请求数据异常,则返回失败
if name is None:
data = {
'status': 1, # 0请求成功 1请求失败
'messages': "添加失败",
}
res = make_response(jsonify(data)) # 设置响应体
return res

# 将数据加入到列表list中
data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 获取列表数据
@app.route('/get_list', methods=["GET"])
def get_list():
data = {
'status': 0, # 0请求成功 1请求失败
'messages': data_list,
}

res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
return res


if __name__ == '__main__':
app.run(debug=True)

该后台服务我提供了4个请求:查询列表数据、添加列表数据(json/form)、删除列表数据。使用postman分别测试如下:

  • 查询列表数据
49. Vue使用axios发送Ajax请求
image-20200225144337145
  • 添加列表数据form
49. Vue使用axios发送Ajax请求
image-20200225163953591
  • 添加列表的数据json
49. Vue使用axios发送Ajax请求
image-20200225164032846
  • 删除列表数据
49. Vue使用axios发送Ajax请求
image-20200225144503508

好了,经过测试,后台的4个api接口都可以用了。那么下面来看看如何使用axios发出请求。

3.在前端使用axios发送请求

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 2.导入axios库 -->
<script src="lib/axios/axios.min.js"></script>

</head>
<body>

<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求form" @click="postInfoForm">
<input type="button" value="post请求json" @click="postInfoJson">
</div>

<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
show() {
console.log('调用show方法');
},
},
methods: {
getInfo() { // 发起get请求

axios.get('http://127.0.0.1:5000/get_list')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});

},
postInfoForm() { // 发起 post 请求 application/x-wwww-form-urlencoded

// 发送 POST 请求
axios({
method: 'post',
url: 'http://127.0.0.1:5000/add_list_form',
data: {
id: '6',
name: '福特'
},
// 设置 transformRequest 和 headers 是兼容发送form表单格式的请求
transformRequest: [function(data) {
// Do whatever you want to transform the data
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
},
postInfoJson() { // 发起 post 请求 json

var data = {
"id": '7',
"name": '福特'
};

// 在这里要注意,尽管flask接收的格式为json,并且设置了跨域处理,使用axios还是不能直接使用json发送请求
// 需要将请求体还为 json格式的字符串,然后 headers 设置为 text/plain 才可以正常发送请求。
axios({
method: 'post',
url: 'http://127.0.0.1:5000/add_list_json',
data: JSON.stringify(data),
headers: {
'Content-Type': 'text/plain',
}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});

},

},

});
</script>

</body>
</html>

4.在网页端查看发送的请求效果

4.1 发送get请求

49. Vue使用axios发送Ajax请求
image-20200226104958385

4.2 发送form格式的post请求

49. Vue使用axios发送Ajax请求
image-20200226105044299

4.3 发送json格式的post请求

49. Vue使用axios发送Ajax请求
image-20200226105200482

在上面看到已经能够正常接收请求返回的信息了,那么下面将逐个请求的具体内容显示出来。

5.打印请求的返回内容

5.1 打印get请求的返回内容

49. Vue使用axios发送Ajax请求
image-20200226114606114
					getInfo() { // 发起get请求

axios.get('http://127.0.0.1:5000/get_list')
.then(function(response) {
console.log(response);
// 打印 data 数据
console.log(response.data.messages);
// 打印 status 数据
console.log(`status = ${response.status}`,);
})
.catch(function(error) {
console.log(error);
});

},

浏览器执行如下:

49. Vue使用axios发送Ajax请求
image-20200226114653656

5.2 打印form格式post请求的返回内容

49. Vue使用axios发送Ajax请求
image-20200226114926936

浏览器执行如下:

49. Vue使用axios发送Ajax请求
image-20200226115002933

5.3 打印json格式post请求的返回内容

49. Vue使用axios发送Ajax请求
image-20200226115139318

浏览器执行如下:

49. Vue使用axios发送Ajax请求
image-20200226115053227

配置axios的全局参数

前面的多个请求中,我在写url的时候是这样的,如下:

axios.get('http://127.0.0.1:5000/get_list')

每个请求都要带上服务的url地址「http://127.0.0.1:5000」其实挺麻烦的,这个参数可以设置为一个全局参数,不用每个接口都去写,设置如下。

6.配置axios请求的URL全局参数

49. Vue使用axios发送Ajax请求
image-20200226145512060
axios.defaults.baseURL = 'http://127.0.0.1:5000';

那么配置了这个根url的参数时候,其他接口只需要写后面的路径即可。

当然,axios还提供了更多的全局参数。

7.查看更多的axios全局参数

http://www.axios-js.com/zh-cn/docs/index.html

49. Vue使用axios发送Ajax请求
image-20200226145703554
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


交流QQ群:

49. Vue使用axios发送Ajax请求


49. Vue使用axios发送Ajax请求



点击下面,查看更多Vue系列文章

49. Vue使用axios发送Ajax请求49. Vue使用axios发送Ajax请求


49. Vue使用axios发送Ajax请求

原文始发于微信公众号(海洋的渔夫):49. Vue使用axios发送Ajax请求

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/32664.html

(0)

及时掌握行业动态,欢迎加入几百人的后端技术交流群:


相关推荐

  • MongoDB 账户权限配置

    勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

    导读:本篇文章讲解 MongoDB 账户权限配置,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月28日
    0036
  • TypeScript 新语法 satisfies:用声明还是用推导?这是个问题

    用了 TypeScript 之后,我们就可以声明类型,然后给 js 变量加上这个类型。 比如这样: 就有类型提示了: 也会做类型检查: 但也不是所有的变量都要手动声明类型,因为 t…

    2023年2月17日
    0045
  • 2022前端经典vue面试题(持续更新中)

    导读:本篇文章讲解 2022前端经典vue面试题(持续更新中),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    2022年11月9日
    0058
  • React 合成事件

    提问: 为什么要一起挂在document上? 合成事件背后的原理? 为什么挂在document上 统一管控。 冒泡机制的原因,提高性能。 在底层抹平了浏览器之间的差异,在上层面向开…

    2022年6月8日
    0041
  • 我对 React 实现原理的理解

    React 是前端开发每天都用的前端框架,自然要深入掌握它的原理。我用 React 也挺久了,这篇文章就来总结一下我对 react 原理的理解。 react 和 Vue 都是基于 …

    2022年11月16日
    0050
  • 从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

    导读:本篇文章讲解 从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    Vue 2023年1月19日
    0039
  • 流行的包管理器yarn的使用方法介绍及常用命令

    不管现实多么惨不忍睹,都要持之以恒地相信,这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去,不要担心此刻的付出没有回报,别再花时间等待天降好运。真诚做人,努力做事!你想要的,岁月都会给你。流行的包管理器yarn的使用方法介绍及常用命令,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    Vue 2023年12月19日
    0057
  • js要四舍五入且保留两位或N位有效数字或取整

    导读:本篇文章讲解 js要四舍五入且保留两位或N位有效数字或取整,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2022年12月25日
    0057
  • vue中使用gantt-elastic实现可拖拽甘特图

    有时候,不是因为你没有能力,也不是因为你缺少勇气,只是因为你付出的努力还太少,所以,成功便不会走向你。而你所需要做的,就是坚定你的梦想,你的目标,你的未来,然后以不达目的誓不罢休的那股劲,去付出你的努力,成功就会慢慢向你靠近。

    导读:本篇文章讲解 vue中使用gantt-elastic实现可拖拽甘特图,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年7月14日
    00263
  • 通过Xshell连接linux——安装启动Nginx

    生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

    导读:本篇文章讲解 通过Xshell连接linux——安装启动Nginx,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月23日
    0045

发表回复

登录后才能评论