不封装常用方法时，如何设计接口函数并在页面调用接口？

当不直接封装常用方法时，设计API接口函数通常是这样的：

// 定义一个通用的fetchData函数
function fetchData(url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    axios(method, {
      url: url,
      data: data,
      // 其他axios配置项...
    })
      .then(response => resolve(response.data))
      .catch(error => reject(error));
  });
}

// 页面上如何调用这个接口
// 示例：获取用户信息
getUserInfo() {
  fetchData('/api/users/me')
    .then(data => console.log('User info:', data))
    .catch(error => console.error('Error fetching user info:', error));
}

// 示例：提交表单数据
submitForm(formData) {
  fetchData('/api/form', 'POST', formData)
    .then(() => console.log('Form submitted successfully'))
    .catch(error => console.error('Error submitting form:', error));
}

在上述代码中，`fetchData`函数接受URL、HTTP方法和可选的数据作为参数，返回一个Promise，用于异步处理axios请求。在页面上，你可以根据需要创建不同的函数，如`getUserInfo`和`submitForm`，分别调用`fetchData`并传入对应的URL和数据。