vue封装axios请求接口并添加前置拦截器和响应拦截器

目录

设置步骤

1.安装axios：

2.创建API文件

3.使用封装的API：

---

 

设置步骤

在Vue中封装axios请求接口并添加前置拦截器和响应拦截器，可以按照以下步骤进行操作：

1.安装axios：

首先，你需要安装axios。可以通过npm或yarn来安装它。在终端中运行以下命令：

npm install axios
 
# 或者使用yarn
yarn add axios

2.创建API文件

在src目录下创建一个名为api.js或api.ts的文件，用于封装axios请求和拦截器。例如，编写以下代码：

import axios from 'axios';
 
// 创建axios实例
const instance = axios.create({
  baseURL: 'https://your-api-url.com', // 设置API的基础URL
  timeout: 5000, // 设置请求超时时间
});
 
// 前置拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，比如添加token等
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);
 
// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么，比如处理错误码等
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);
 
export default instance;

在这个例子中，我们创建了一个名为instance的axios实例，并设置了基础URL和请求超时时间。然后，我们使用interceptors添加了前置拦截器和响应拦截器。

3.使用封装的API：

现在，你可以在Vue组件中使用封装的API来发送请求。例如，在某个组件中，你可以引入刚刚创建的API文件，并使用它来发送请求：

import api from './api';
 
export default {
  methods: {
    fetchData() {
      api.get('/data')
        .then((response) => {
          // 处理成功响应数据
          console.log(response);
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
  },
};

在这个例子中，我们通过api.get('/data')发送了一个GET请求来获取数据。你可以根据需要使用不同的HTTP方法（如GET、POST等）来发送请求。

这样，你就可以在Vue中封装axios请求接口并添加前置拦截器和响应拦截器了。