ai-4：页面展示接口数据，隐藏弹框，并具有增删改查功能（react）

开发中遇到的问题与解决方法：

异步

解法1：useEffect监听变量，触发相应操作
解法2：Promise对象管理异步任务

一个 Promise 对象代表一个在这个 promise被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。
这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

一个 Promise 必然处于以下几种状态之一：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败。

待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

//创建一个新的Promise
//传入参数为两个回调函数resolve, reject
//当异步代码执行成功时，才会调用resolve(...), 当异步代码失败时就会调用reject(...)
new Promise(function (resolve, reject) {
    console.log(1111);//1111
    resolve(2222);
}).then(function (value) {
    console.log(value);//2222
    return 3333;
}).then(function (value) {
    console.log(value);//3333
    throw "An error";
}).catch(function (err) {
    console.log(err);//An error
});


const myPromise =
  (new Promise(myExecutorFunc))//回调函数用的是方法名而不是表达式
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

HTTP请求方法

根据 HTTP 标准，HTTP 请求可以使用多种请求方法。
HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。
HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

一般来说，GET就是用来获取信息的，POST是用来发送数据到服务器，例如提交表单。PUT是修改服务器上存在的文档并更新，DELETE就是从服务器上删除数据。
但是！！POST方法不一定是用在提交数据这方面，在新增数据资源，获取查询结果，也遇到过有开发使用的是POST方法。

get 对应参数名称 param；post 对应参数名称 data

get、delete携带参数在path上时，不需要返回值（参数一般是在path、query、body）

queryRuleSetting: async (resourceId) => {
    const opts = {
      url: `/dataRule/${resourceId}`,
      method: 'get',
    }
    return await utils.Request(opts, [])
  },
 deleteDataSource: async (id) => {
    const opts = {
      url: `/dataResource/${id}`,
      method: 'delete',
    }
    return await utils.Request(opts, [])
  },

get携带参数时，参数命名一样可减少代码量，如接口2，3

queryModuleList: async (params = {}) => {
    const opts = {
      url: `/modulemanage/all`,
      method: 'get',
      params,
    }
    return await utils.Request(opts, [])
  },
queryObserverList2: async (data = {}) => {
    const opts = {
      url: `/observerTransfer/queryObserverList`,
      method: 'post',
      data,
    }
    return await utils.Request(opts, [])
  },
  queryObserverList3: async (args = {}) => {
    const opts = {
      url: `/observerTransfer/queryObserverList`,
      method: 'post',
      data: {...args},
    }
    return await utils.Request(opts, [])
  },