Axios.min.js是从Cloudflare的jsDeliver网络获取的一个轻量级的基于Promise的HTTP客户端库,用于在浏览器和Node.js中进行异步数据交换。
Axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js 环境。它具有以下特点:
- 从浏览器创建 XMLHttpRequest 请求。
- 在 Node.js 中发出 http 请求。
- 支持 Promise API。
- 拦截请求和响应。
- 转换请求和响应数据。
- 取消请求功能。
- 自动转换 JSON 数据格式。
- 提供客户端支持以防止 CSRF/XSRF。
### 二、axios 的使用
**安装 axios**
在项目中通过命令行安装 Axios:
```shell
cnpm install axios
```
**引入 axios 到 main.js 文件**
将 Axios 引入到 Vue 应用的主文件 `main.js` 中,并将其挂载为全局属性 `$http`,以便在整个应用中使用。
```javascript
import Axios from axios;
Vue.prototype.$http = Axios;
```
### 发送 GET 请求
#### 方法一:传递参数
通过在请求配置对象中添加 `params` 属性来发送带有查询参数的 GET 请求。例如:
```javascript
this.$http.get(https://cnodejs.org/api/v1/topics, {
params: { // 参数列表
page: this.page,
limit: this.limit,
},
}).then(res => {
// 处理请求成功后的响应数据
this.isLoading = false;
this.items = res.data.data;
console.log(this.items);
}).catch(err => {
// 捕获并处理错误信息
console.log(err)
});
```
#### 方法二:直接在 URL 中拼接参数
也可以选择将查询字符串直接添加到请求的 URL 上。例如:
```javascript
this.$http.get(https://cnodejs.org/api/v1/topics?page=1&limit=15)
```
注意,在使用箭头函数处理成功响应时,`this` 指向 Vue 实例本身;如果需要在普通函数中保持正确的 `this` 上下文,则需特别处理。