一、Axios是什么
- Axios是一个基于promise的HTTP库（类似于jQuery的Ajax，用于HTTP请求）
- 可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服务端）
二、Axios有哪些特性
- 支持promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
三、Axios浏览器支持
image.png
四、安装
1.使用 npm:
npm install axios
2.引入axios
安装成功后进行引入，在vue项目的main.js文件中引入axios
import axios from 'axios'
Vue.prototype.$axios = axios
五、用法（vue项目已搭建）
- Axios基础用法（get、post、put 等请求方法）
先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete
get：（一般用于）获取数据
post：提交数据（表单提交+文件上传）
put：更新（或编辑）数据（所有数据推送到后端（或服务端））
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
题外话，一般公司在实际开发项目过程中：
（1）post：一般用于新建
（2）put：一般用于更新（适合数据量比较少的更新）
（3）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端
以上这些题外话，只是一般的常规用法，不能代表一定要这样用；当然了，你可能会说我用post来获取数据，行不行？这个当然行了，绝对没问题！具体怎么用还是前后端一起商量着决定，以免发生不愉快的肢体冲突！
（1）get 请求
<template>
<div>
<h1>axios中get请求方式</h1>
<button @click="getJoke">获取笑话</button>
<p>{{ msg }}</p>
<!--用来显示笑话-->
</div>
</template>
<script>
export default {
data() {
return {
msg: null,
};
},
methods: {
getJoke() {
//发送请求
this.$axios
.get("https://autumnfish.cn/api/joke")
.then((res) => {
console.log(res.data);
//此处的this关键字的指向不是Vue实例，所以获取不到data里面的数据
this.msg = res.data;
})
.catch((err) => {
console.error(err);
});
},
},
};
</script>
下面了解一下请求信息—
image.png
2） post 请求
this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
// 返回数据在 res.data 中
})
