Web前端开发——Ajax，Axios概述及在Vue框架中的使用

// 引入axios
import axios from 'axios';
 
// 创建axios实例，并配置基本的URL前缀
const service = axios.create({
  baseURL: 'http://your-api-url/',
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    // 例如添加token
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
// 导出axios实例
export default service;

在Vue组件中使用上述创建的axios实例：

<template>
  <div>
    <!-- 界面内容 -->
  </div>
</template>
 
<script>
import service from '@/utils/request'; // 引用上面创建的axios实例
 
export default {
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    fetchData() {
      service.get('/your-api-endpoint')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误情况
        });
    }
  },
  created() {
    this.fetchData(); // 创建时请求数据
  }
};
</script>

这个例子展示了如何在Vue项目中创建一个axios实例，并在请求中添加token作为认证头部，以及如何在Vue组件中使用这个实例来发送请求并处理响应。