vue 时间格式转换封装

可以通过封装一个全局过滤器来实现 Vue 时间格式转换的功能。具体步骤如下：

1. 在 Vue 实例中定义一个全局过滤器：

Vue.filter('dateFormat', function(dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return dayjs(dateStr).format(pattern)
})

2. 在模板中使用过滤器：

<p>{{ createTime | dateFormat }}</p>

其中，`createTime` 是需要格式化的时间数据，`dateFormat` 是在第一步中定义的全局过滤器。

3. 也可以传入一个自定义的格式化字符串：

<p>{{ createTime | dateFormat('YYYY年MM月DD日') }}</p>

这样就可以实现 Vue 时间格式转换的功能了。需要注意的是，这里使用了 `dayjs` 库进行时间格式化，需要在项目中安装该库。

相关问题

vue3 axios 优秀封装

Vue3中使用Axios作为HTTP客户端是一种常见的做法，因为它轻量级、易于集成，并且与JavaScript生态系统有很好的兼容性。为了提高开发效率和代码可维护性，对Axios进行优雅的封装是非常推荐的。一个优秀的封装通常包括以下几个方面：

1. **插件式设计**：将Axios封装成一个Vue的全局或局部插件，便于全局注册和按需引入。

import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from './vue-axios';

const app = createApp(App);
app.use(VueAxios, axios); // 使用时配置axios实例，如设置baseURL等

2. **响应拦截**：封装`request`和`response`拦截器，处理请求前的配置以及错误处理和响应数据的统一处理。

// vue-axios.js
export default {
  install(app, axiosInstance) {
    axiosInstance.interceptors.request.use(config => {
      // 添加默认配置，例如token验证
      config.headers.common['Authorization'] = getToken();
      return config;
    }, error => {
      return Promise.reject(error);
    });

    axiosInstance.interceptors.response.use(response => {
      return response.data; // 返回解析后的数据
    }, error => {
      handleError(error);
    });
  }
};

3. **响应转换**：提供统一的数据转换工具，将 Axios 返回的原始Promise对象转化为更符合 Vue 中 Promise 使用习惯的响应。

4. **API 容器**：创建一个单独的对象或模块来管理所有的 API 调用，提供命名空间并支持链式调用。

const api = {
  login({ username, password }) {
    return axios.post('/api/login', { username, password });
  },
  getUser(id) {
    return axios.get(`/api/users/${id}`);
  },
};

export default api;

5. **错误处理**：为异常情况提供统一的处理机制，比如全局统一提示，或者自定义具体的错误提示。

6. **异步组件加载**：当需要延迟加载某些依赖时，可以利用 Axios 的 promise特性来控制组件是否显示或隐藏。

vue2基于axios封装reuest.js

Vue2 中基于 axios 封装的 `request.js` 通常是用于简化 Vue 应用程序对 API 的请求过程。它将 axios 这个流行的 JavaScript HTTP 客户端库集成到项目中，提供了一层便捷的接口，方便开发者发送 GET、POST 等各种类型的网络请求，并统一处理响应状态、错误以及数据转换等问题。

以下是一个简单的封装示例：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL, // api base url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

// 静态方法
service.get, service.post, service.put, service.delete = ... // 封装常用HTTP动词

export default {
  request: async (config) => {
    try {
      const response = await service(config);
      if (response.status >= 200 && response.status < 300) {
        return response.data;
      } else {
        throw new Error(response.statusText);
      }
    } catch (error) {
      console.error(error); // 在这里可以添加错误处理逻辑
      throw error; // 或者抛出错误供上一层处理
    }
  },
};