vue2中axios封装请求接口方法 将请求，接口地址和方法分开页面

### 回答1：
在 Vue 2 中，可以使用 Axios 库来封装网络请求。以下是一种将请求、接口地址和方法分开的页面的封装方法：

1. 首先，创建一个 `api.js` 文件，用于存放所有的接口地址和请求方法，例如：

import axios from 'axios'

// 定义接口地址
const BASE_URL = 'https://api.example.com'

// 封装 GET 请求方法
export function getRequest (url, params) {
  return axios.get(`${BASE_URL}${url}`, { params })
}

// 封装 POST 请求方法
export function postRequest (url, data) {
  return axios.post(`${BASE_URL}${url}`, data)
}

// 封装 PUT 请求方法
export function putRequest (url, data) {
  return axios.put(`${BASE_URL}${url}`, data)
}

// 封装 DELETE 请求方法
export function deleteRequest (url) {
  return axios.delete(`${BASE_URL}${url}`)
}

2. 在需要调用接口的页面中，引入 `api.js` 文件，并调用其中的请求方法，例如：

import { getRequest, postRequest } from '@/api.js'

// 调用 GET 请求方法
getRequest('/users', { page: 1 })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

// 调用 POST 请求方法
postRequest('/login', { username: 'admin', password: '123456' })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

这样，就可以将请求、接口地址和方法分开，便于管理和维护。

### 回答2：
在Vue2中，我们可以使用axios来发送HTTP请求，并且可以通过封装请求接口方法，将请求、接口地址和方法分开到不同的页面中，提高代码的可读性和维护性。

首先，在项目中导入axios和相关依赖。可以通过npm或者CDN的方式导入axios和Vue相关的库。

接下来，创建一个util文件夹，并在该文件夹中创建一个api.js文件，用于封装请求接口方法。

在api.js文件中，我们可以定义一个对象，用来存储各个接口的请求方法。

// api.js
import axios from 'axios';

const api = {
  getUserInfo() {
    return axios.get('/api/user');
  },
  login(params) {
    return axios.post('/api/login', params);
  },
  logout() {
    return axios.get('/api/logout');
  },
  // 其他接口...
};

export default api;

在以上代码中，我们定义了一个api对象，该对象包含了getUserInfo、login、logout等接口的请求方法。这些方法通过axios发送HTTP请求，并返回一个Promise对象。

接下来，在需要使用接口的页面中，可以通过import语句引入api.js文件，从而可以调用相应的接口方法。

// Home.vue
import api from '@/utils/api';

export default {
  name: 'Home',
  mounted() {
    this.getUser();
  },
  methods: {
    getUser() {
      api.getUserInfo()
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 其他方法...
  }
}

以上代码是一个Home页面的示例，通过引入api.js文件，并调用getUserInfo接口方法，获取用户信息。在then回调中，我们可以处理返回的数据。在catch回调中，我们可以处理请求出错的情况。

通过将请求、接口地址和方法分开到不同的页面，我们可以使代码结构更加清晰，易于维护和管理。同时，可以在api.js文件中统一处理请求的错误信息和请求的统一配置，增加灵活性。

### 回答3：
在Vue2中使用axios封装请求接口方法，可以将请求、接口地址和方法分开到不同的页面。

首先，创建一个名为api.js的文件，用于集中管理所有的接口地址，例如：

// api.js
const baseURL = 'http://api.example.com'; // 设置接口的基础地址

export default {
  login: baseURL + '/login', // 登录接口
  getUserInfo: baseURL + '/getUserInfo', // 获取用户信息接口
  // 其他接口...
}

接下来，创建一个名为request.js的文件，用于统一封装axios请求方法，例如：

// request.js
import axios from 'axios';

axios.defaults.timeout = 5000; // 设置请求超时时间

export default function request(url, method, data) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method,
      data
    }).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    });
  });
}

最后，在需要发送请求的组件中，引入api.js和request.js，并调用请求方法，例如：

// MyComponent.vue
import api from './api.js';
import request from './request.js';

export default {
  methods: {
    login() {
      request(api.login, 'post', { // 调用登录接口
        username: 'admin',
        password: '123456'
      }).then(res => {
        console.log('登录成功:', res);
      }).catch(error => {
        console.log('登录失败:', error);
      });
    },
    getUserInfo() {
      request(api.getUserInfo, 'get') // 调用获取用户信息接口
      .then(res => {
        console.log('获取用户信息成功:', res);
      }).catch(error => {
        console.log('获取用户信息失败:', error);
      });
    },
    // 其他请求方法...
  }
}

这样，我们将请求、接口地址和方法都分开到不同的页面中，使代码更加清晰和可维护。