社区首页 >专栏 >Vue 框架学习系列七：Axios 与 HTTP 请求在 Vue 3 中的应用

Vue 框架学习系列七：Axios 与 HTTP 请求在 Vue 3 中的应用

原创

china马斯克

发布于 2024-10-06 00:23:42

8750

引言

在现代Web开发中，与后端服务器进行通信是前端应用不可或缺的一部分。Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中运行，并且提供了易于使用的API来处理HTTP请求和响应。在Vue 3项目中，Axios是一个流行的选择，用于与后端API进行交互。

安装Axios

首先，你需要在Vue 3项目中安装Axios。你可以使用npm或yarn来安装它：

npm install axios  
# 或者  
yarn add axios

配置Axios实例

在Vue 3项目中，通常会在一个单独的文件中创建一个Axios实例，并配置一些全局设置，如baseURL（基础URL）和headers（请求头）。这样做的好处是你可以在整个项目中重用这个配置好的Axios实例。

// src/plugins/axios.js  
import axios from 'axios';  
  
const instance = axios.create({  
  baseURL: 'https://api.example.com', // 替换为你的API基础URL  
  timeout: 1000, // 请求超时时间  
  headers: {'X-Custom-Header': 'foobar'} // 自定义请求头  
});  
  
// 添加请求拦截器  
instance.interceptors.request.use(config => {  
  // 在发送请求之前做些什么，比如添加认证token  
  const token = localStorage.getItem('token');  
  if (token) {  
    config.headers['Authorization'] = `Bearer ${token}`;  
  }  
  return config;  
}, error => {  
  // 对请求错误做些什么  
  return Promise.reject(error);  
});  
  
// 添加响应拦截器  
instance.interceptors.response.use(response => {  
  // 对响应数据做点什么  
  return response;  
}, error => {  
  // 对响应错误做点什么，比如统一处理错误状态码  
  if (error.response.status === 401) {  
    // 处理未授权错误，比如重定向到登录页面  
  }  
  return Promise.reject(error);  
});  
  
export default instance;

在Vue组件中使用Axios

现在你已经配置好了Axios实例，接下来就可以在Vue组件中使用它了。通常，你会在组件的methods中定义方法来处理HTTP请求，并在mounted或created生命周期钩子中调用这些方法。

<template>  
  <div>  
    <h1>文章列表</h1>  
    <ul>  
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>  
    </ul>  
  </div>  
</template>  
  
<script>  
import axios from '@/plugins/axios'; // 引入配置好的Axios实例  
  
export default {  
  data() {  
    return {  
      articles: []  
    };  
  },  
  methods: {  
    async fetchArticles() {  
      try {  
        const response = await axios.get('/articles'); // 发送GET请求到/articles端点  
        this.articles = response.data; // 将响应数据赋值给articles  
      } catch (error) {  
        console.error('获取文章列表失败:', error);  
      }  
    }  
  },  
  mounted() {  
    this.fetchArticles(); // 在组件挂载后调用fetchArticles方法  
  }  
};  
</script>

处理POST请求

除了GET请求，你可能还需要发送POST请求来创建新的资源。下面是一个处理POST请求的示例：

async createArticle(title, content) {  
  try {  
    const response = await axios.post('/articles', {  
      title: title,  
      content: content  
    });  
    // 假设服务器返回了新创建的文章对象  
    this.articles.push(response.data); // 将新文章添加到文章中列表（如果需要在前端即时显示）  
    alert('文章创建成功!');  
  } catch (error) {  
    console.error('创建文章失败:', error);  
  }  
}

你可以在表单提交事件中调用这个方法，将用户输入的数据作为参数传递给它。