vue axios代码封装示例

### 回答1：

Vue Axios 代码封装示例可以参考如下：// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})// request 拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做一些处理
// ...
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
// 如果返回的状态码不是200，则reject
if (res.code !== 200) {
return Promise.reject(res.message || 'Error')
} else {
return res
}
},
error => {
return Promise.reject(error)
}
)export default service

### 回答2：
Vue axios 提供了一种方便的方式来发送 HTTP 请求和处理响应。以下是一个简单的示例，展示了如何封装 axios 代码。

首先，需要在项目中安装 axios：

npm install axios

然后，在你的Vue组件中，你可以创建一个名为axiosService.js的文件，并将以下代码添加到该文件中：

import axios from 'axios';

// 创建一个 axios 实例，可以在所有的请求中共享该实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础URL
  timeout: 5000 // 设置请求超时时间
});

// 请求拦截器，在发送请求前可以对请求进行一些处理
instance.interceptors.request.use(
  config => {
    // 在请求发送前做一些处理，例如添加 token 到请求头部
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 处理请求错误
    console.error(error);
    return Promise.reject(error);
  }
);

// 响应拦截器，在接收到响应后可以对响应进行一些处理
instance.interceptors.response.use(
  response => {
    // 在接收到响应数据前做一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    console.error(error);
    return Promise.reject(error);
  }
);

export default instance;

现在，在你的 Vue 组件中，你可以导入 `axiosService.js` 并使用 `axios` 实例来发送请求：

import axiosService from '@/axiosService';

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    getUsers() {
      axiosService.get('/users')
        .then(response => {
          this.users = response;
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  mounted() {
    this.getUsers();
  }
};

这是一个简单的封装示例，当然你可以根据你项目的需求来进行更复杂的封装。这样可以提高代码的可重用性，并使代码更易于维护。

### 回答3：
以下是一个Vue Axios代码封装的示例：

首先，我们需要安装`axios`和`vue-axios`，可以通过npm或者yarn进行安装。

然后，我们创建一个util文件夹，并在其中创建一个`http.js`文件。在`http.js`中，我们导入`axios`和`vue-axios`，同时创建一个名为`http`的实例，并设置其基本的请求配置。

import axios from 'axios';
import VueAxios from 'vue-axios';
import Vue from 'vue';

Vue.use(VueAxios, axios);

const http = axios.create({
  baseURL: 'http://api.example.com', // 设置默认的请求地址
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头类型
  },
});

export default http;

在`http.js`中，我们创建了一个名为`http`的实例，这样我们可以在整个项目中使用该实例来发送请求，并可以设置一些默认的请求配置。

接下来，我们可以在其他需要发送请求的组件中引入`http.js`文件，并使用`http`来发送请求。

import http from '@/utils/http';

export default {
  methods: {
    fetchData() {
      http.get('/data').then(response => {
        // 处理响应数据
      }).catch(error => {
        // 处理错误
      });
    },
    sendData() {
      const data = {
        // 请求的数据
      };
      http.post('/data', data).then(response => {
        // 处理响应数据
      }).catch(error => {
        // 处理错误
      });
    },
  },
};

在上述示例中，我们首先引入了`http.js`文件，然后通过使用`http`来发送请求。我们可以使用`http.get`来发送GET请求，使用`http.post`来发送POST请求，等等。在请求的结果中，我们可以使用`.then`来处理成功的响应，使用`.catch`来处理错误。

通过封装`http.js`文件，我们可以在整个项目中使用同样的请求配置，同时也可以更好地管理请求和错误处理的逻辑。