Axios 在 Vue 中的封装技巧与实战应用

2023-12-26 04:52:35

利用 Axios 提升 Vue 中的 HTTP 请求处理

简介

Axios 是一个备受推崇的 JavaScript 库，专为处理 HTTP 请求而生。凭借其简洁易用的 API，它在 Vue.js 项目中大受欢迎。本文将深入探讨使用 Axios 在 Vue 中进行 HTTP 请求处理的最佳实践。

安装和使用 Axios

在你的 Vue 项目中安装 Axios 非常简单，只需运行以下命令：

npm install axios

安装完成后，便可导入 Axios 并开始使用。以下是如何发送 GET 请求的示例：

import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

进行身份验证

Axios 无缝支持身份验证。你可以添加一个请求拦截器，在每个请求发送前调用，并在其中添加身份验证标头：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

处理 JSON 数据

Axios 可以轻松处理 JSON 数据。通过设置默认的 Content-Type 标头，你可以让 Axios 自动将请求数据转换为 JSON 格式：

axios.defaults.headers.common['Content-Type'] = 'application/json';

以下是如何发送和接收 JSON 数据的示例：

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'My new post',
  body: 'This is my new post.',
})
  .then(response => {
    this.post = response.data;
  })
  .catch(error => {
    console.error(error);
  });