轻松上手Axios：Vue的HTTP请求利器

前端

2023-07-24 17:59:06

Axios：提升 Vue 开发 HTTP 请求效率的利器

简介

HTTP 请求是 Vue 项目不可或缺的一部分，它负责在客户端和服务器之间传递数据。而 Axios 是 Vue 官方推荐的 HTTP 请求工具，凭借其轻量、易用、功能强大的特性，深受开发者喜爱。

Axios 的优势

轻量级： 不会为您的项目增添额外负担。
易于使用： API 直观易懂，即使初学者也能快速上手。
功能强大： 支持各种 HTTP 请求方法，并提供超时设置、请求拦截和响应拦截等实用功能。
跨平台： 可在浏览器、Node.js 等多个平台上使用。

安装和引入

npm 方式：

npm install axios -S

bower 方式：

bower install axios

CDN 方式：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本用法

GET 请求：

axios.get('https://jsonplaceholder.typicode.com/todos')
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.error(err);
  });

POST 请求：

axios.post('https://jsonplaceholder.typicode.com/todos', {
  title: 'Learn Axios',
  completed: false
})
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.error(err);
  });

更多功能

超时设置：

axios.get('https://jsonplaceholder.typicode.com/todos', {
  timeout: 1000
});

请求拦截：

axios.interceptors.request.use(config => {
  // 在请求发出之前做一些事情
  return config;
});

响应拦截：

axios.interceptors.response.use(res => {
  // 在收到响应之后做一些事情
  return res;
});

结论

Axios 是 Vue 项目中不可或缺的 HTTP 请求工具，其轻量、易用和功能强大的特性大大简化了开发流程。通过本文，相信您已对 Axios 有了更深入的了解，可以在项目中熟练应用它。

常见问题解答

如何设置请求头？

使用 headers 配置项：

axios.get('https://jsonplaceholder.typicode.com/todos', {
  headers: {
    Authorization: 'Bearer my-token'
  }
});

如何发送 JSON 数据？

使用 JSON.stringify() 方法：

axios.post('https://jsonplaceholder.typicode.com/todos', JSON.stringify({
  title: 'Learn Axios',
  completed: false
}));

如何处理错误？

使用 catch() 方法：

axios.get('https://jsonplaceholder.typicode.com/todos')
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.error(err);
  });

如何并行发送多个请求？

使用 Promise.all() 方法：

const requests = [
  axios.get('https://jsonplaceholder.typicode.com/todos'),
  axios.get('https://jsonplaceholder.typicode.com/users')
];

Promise.all(requests)
  .then(responses => {
    console.log(responses[0].data);
    console.log(responses[1].data);
  })
  .catch(err => {
    console.error(err);
  });

如何取消请求？

使用 CancelToken：

const cancelToken = axios.CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/todos', {
  cancelToken: cancelToken.token
});

// 取消请求
cancelToken.cancel();