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

npm install axios  
# 或者  
yarn add 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;

<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>

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);  
  }  
}