一、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项目已搭建）

1. 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 中
})