Promise封装uniapp请求：让你的代码焕发新活力

前端

2023-10-26 09:32:39

前言

大家好，今天我将分享一个技巧：使用Promise封装uniapp请求，让你的代码焕然一新。

uniapp是一个流行的跨平台开发框架，它允许你使用一套代码构建iOS、Android和H5应用程序。然而，它的请求处理机制有时会显得有些繁琐和难以管理。

Promise简介

Promise是一种用于处理异步操作的JavaScript对象。它表示一个未来将完成或失败的操作，你可以使用它来处理操作结果或错误。

当一个Promise被创建时，它处于"pending"状态。一旦操作完成，它就会变为"resolved"或"rejected"状态，并传递一个值或一个错误对象。

你可以使用.then()和.catch()方法来处理已解决或已拒绝的Promise。

封装uniapp请求

我们可以使用Promise来封装uniapp请求，从而简化代码并提高开发效率。以下是步骤：

创建一个新的JavaScript文件，如api.js。
在文件中，定义一个函数来发起请求，例如：

const request = (url, data, method) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      data,
      method,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
};

在你的uniapp组件中，你可以使用该函数来发送请求，例如：

import { request } from './api.js';

export default {
  methods: {
    async getData() {
      const res = await request('https://example.com/api/data', { id: 123 });
      console.log(res);
    },
  },
};