vue axios全攻略

Axios 是一个流行的基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。它提供了许多强大的功能，如拦截请求和响应、自动转换 JSON 数据、取消请求等等。

下面是 Vue 中使用 Axios 的全攻略：

1. 安装 Axios

你可以通过 npm 或 yarn 安装 Axios：

npm install axios --save

或

yarn add axios

2. 引入 Axios

在 main.js 中引入 Axios：

import axios from 'axios'
Vue.prototype.$http = axios

这将在 Vue 实例中添加一个 `$http` 对象，可以在组件中使用。

3. 发送 GET 请求

可以使用 `$http.get` 方法发送 GET 请求：

this.$http.get('/api/data').then(response => {
  console.log(response.data)
})

这将发送一个 GET 请求到 `/api/data`，并在响应成功后打印响应数据。

4. 发送 POST 请求

可以使用 `$http.post` 方法发送 POST 请求：

this.$http.post('/api/data', { name: 'John', age: 30 }).then(response => {
  console.log(response.data)
})

这将发送一个 POST 请求到 `/api/data`，并在响应成功后打印响应数据。

5. 拦截请求和响应

Axios 提供了一个拦截器 API，可以在请求发送前或响应返回后对它们进行拦截和处理。

可以使用 `axios.interceptors` 对象添加拦截器：

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

这将添加一个请求拦截器和一个响应拦截器，它们可以分别对请求和响应进行处理。

6. 自动转换 JSON 数据

Axios 可以自动将 JSON 数据转换为 JavaScript 对象，可以在请求配置中设置 `responseType` 为 `json`：

this.$http.get('/api/data', { responseType: 'json' }).then(response => {
  console.log(response.data)
})

7. 取消请求

Axios 提供了一个 CancelToken API，可以用来取消请求。可以在请求中传递一个 CancelToken 对象，然后在需要取消请求的时候调用它的 `cancel` 方法。

const source = axios.CancelToken.source();

this.$http.get('/api/data', { cancelToken: source.token }).then(response => {
  console.log(response.data)
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log(error);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

这将创建一个 CancelToken 对象，并将它传递给请求。然后，在需要取消请求的时候，调用 `cancel` 方法即可。

以上就是 Vue 中使用 Axios 的全攻略，希望能帮助到你。