lazy evaluation and deferring a computation await promise async 接口MOCK数据 模拟网络请求与响应

 实践：

1）模拟网络请求与响应

// const login = (data) => request.post("/login", data);
const login = (data) => new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code. 
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve(loginMock); // Yay! Everything went well!
  }, 250);
});




login(values)
      .then((res) => {
        const { data, msg, status, token } = res;
        setBtnLoad(false);
        if (status === 1) return;
        saveToken(token);
        data.isLogin = true;
        message.success(msg);
        if (values.remember) {
          saveUser(data);
        }
        setUserInfo(data);
      })
      .catch(() => {
        setBtnLoad(false);
      });

　　

 src/mock/index.js · 孔乙己拉夫米/react-ant-admin - 码云 - 开源中国 https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/blob/master/src/mock/index.js

function post(url, data) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      switch (url) {
        case "/login": {
          const info = userInfoList.find((u) => u.account === data.account);
          if (info) {
            MockData[url].data = info;
            currentUser = info;
            return res(MockData[url]);
          }
          message.error("未找到账号");
          return;
        }
        case "/addmenu": {
          menu.push({ ...data, menu_id: Math.random() });
          return res(MockData[url]);
        }
        case "/addmessage": {
          msgList.push({
            ...data,
            m_id: Math.random(),
            creator: userInfo.data.username,
            add_time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          });
          msg.data.total = msgList.length;
          return res(MockData[url]);
        }
        case "/delmenu": {
          let newMenu = menu.filter((i) => i.key !== data.key);
          menu = newMenu.filter((i) => i.parentKey !== data.key);
          return res(MockData[url]);
        }
        case "/getmenuinfo": {
          MockData[url].data = menu.find((i) => i.key === data.key);
          return res(MockData[url]);
        }
        case "/editmenuinfo": {
          menu = menu.map((item) => {
            if (item.key === data.key) {
              return { ...item, ...data };
            }
            return item;
          });
          return res(MockData[url]);
        }
        case "/getmessage": {
          let list = [...msgList];
          if (data.name) {
            list = list.filter((i) => i.name.includes(data.name));
          }
          if (data.description) {
            list = list.filter((i) => i.description.includes(data.description));
          }
          MockData[url].data.list = list;
          msg.data.total = list.length;
          return res(MockData[url]);
        }
        default: {
          res({ status: 1, msg: "暂无" });
          break;
        }
      }
    }, 100);
  }).then((res) => {
    if (res.status === 0) {
      return res
    } else {
      message.error("接口暂未配置")
      return Promise.reject("接口暂未配置")
    }
  });
}

　　

 

 

 

Promise - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

 

await - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

 

 

async function - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

 

 

 

let myFirstPromise = new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code. 
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage is whatever we passed in the resolve(...) function above.
  // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
  console.log("Yay! " + successMessage);
});