vue、react接口请求免写tyr catch封装promiseToArr

 这样做就不用再业务代码里面写 try catch了 非常好用

  import { documentAddApi} from '@/apis/index.js';
  import { promiseToArr } from '@/utils/common.js';
  import { ElMessage } from 'element-plus';



//从接口请求那边转正常语法
export function promiseToArr(promise, errorExt = null) {
  return promise
    .then((data) => {
      return [null, data];
    })
    .catch((err) => {
      if (errorExt) {
        Object.assign(err, errorExt);
      }
      return [err, undefined];
    });
}


使用的时候
  //点击确定新增
  const documentAddFn = async () => {
    const [err, res] = await promiseToArr(documentAddApi(form.value));
    if (err) return ElMessage.error(err.message || '新增文书失败');
    // res 里面就是数据了
    ElMessage.success(res.message || '新增文书成功');
  };

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中接口请求封装有多种方式,下面我会介绍一种常见的方法: 首先,我们可以创建一个独立的模块,专门用于发送接口请求。这个模块可以是一个单独的文件,比如 `api.js`。 ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.example.com', // 接口请求的基础 URL timeout: 5000, // 请求超时时间 }); export function fetchUser(userId) { return api.get(`/user/${userId}`); } export function updateUser(userId, data) { return api.put(`/user/${userId}`, data); } // 其他接口请求方法... ``` 然后,在需要使用接口的地方,我们可以导入上面定义的方法,并调用它们来发送请求。 ```javascript import { fetchUser, updateUser } from './api'; export default { data() { return { user: null, }; }, methods: { async getUser(userId) { try { const response = await fetchUser(userId); this.user = response.data; } catch (error) { console.error(error); } }, async updateUser(userId, data) { try { await updateUser(userId, data); // 更新成功的处理逻辑... } catch (error) { console.error(error); } }, // 其他接口请求方法... }, }; ``` 上述代码中,我们使用了 axios 库来发送实际的请求。你可以根据项目需求选择其他库或自己封装一个请求库。 需要注意的是,上述代码只是一个简单的示例,实际项目中可能还需要处理请求的错误、loading 状态、请求拦截器、响应拦截器等等。具体的封装方式可以根据项目的需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值