Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
而Axios是vue中主要的XMLHttpRequest的实现方式，对于vue来说掌握Axios是非常有必要的，基本大部分的数据请求都是使用XMLHttpRequest请求得来。以下是vue3为例axios的安装配置及简单的应用。
Axios的安装
#在终端下，切换到项目目录下执行此命令
npm install axios --save
1
2
2
Axios的引入
# main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
axios.defaults.withCredentials=true
const app = createApp(App)
app.config.globalProperties.$axios = axios//全局axios
app.mount('#app')
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
这里我们定义全局属性来使用axios，基本上每个页面都要使用到axios，因此在main.js中定义全局属性来实现axios告别繁杂的引用。
vue3.x中定义全局属性的方法和vue2版本中差别是很大的不通用的，在2.0版本可以直接使用this.属性名；而在vue3.x版本中需要在globalProperties挂载全局变量。
axios的使用
<scrip>
//axios的get请求
this.$axios.get('url').then((res) => {
console.log(res.data)
}).catch((err) => {
console.log(err)
})
//axios的get请求
this.$axios.post('url',{"name":''}).then((res) => {
console.log(res.data)
}).catch((err) => {
console.log(err)
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
