vue2项目中axios的封装

在Vue2项目中，可以通过对Axios进行封装来统一处理请求和响应，实现更高效的API调用。下面是一个简单的示例，演示如何在Vue2项目中封装Axios：

1. 首先，安装Axios依赖：

npm install axios --save

2. 在src目录下创建一个名为`api`的文件夹，并在其中创建一个`http.js`文件。

3. 在`http.js`文件中，引入Axios并创建一个新的Axios实例：

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://api.example.com', // 设置基本URL
  timeout: 10000, // 设置超时时间
});

4. 接下来，可以在`http.js`文件中添加请求拦截器和响应拦截器来统一处理请求和响应。例如，可以在请求拦截器中添加token、处理请求错误等：

http.interceptors.request.use(
  config => {
    // 在这里可以添加token、处理请求错误等
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

5. 然后，可以在`http.js`文件中添加响应拦截器来统一处理响应结果和错误。例如，可以在响应拦截器中处理返回的错误码、统一处理错误提示等：

http.interceptors.response.use(
  response => {
    // 在这里可以处理返回的结果、错误码等
    return response.data;
  },
  error => {
    // 在这里可以统一处理错误提示等
    return Promise.reject(error);
  }
);

6. 最后，可以在Vue组件中使用封装后的Axios。例如，在一个组件中发送一个GET请求：

import http from '@/api/http';

export default {
  methods: {
    fetchData() {
      http.get('/data')
        .then(response => {
          // 处理返回的数据
        })
        .catch(error => {
          // 处理请求错误
        });
    }
  }
}

通过以上步骤，我们成功地封装了Axios，并在Vue2项目中进行了使用。这样做的好处是可以统一处理请求和响应，简化了代码，提高了开发效率。当然，这只是一个简单的示例，你可以根据实际需求进行更复杂的封装。