Promise 对象的处理

一、MDN Web Plus 社区的详细描述：

Promise - JavaScript | MDN (mozilla.org)

二、什么时候会出现Promise 对象

1）、使用axios 获取的返回值

// 创建axios 示例
const crissyService = axios.create({
    baseURL: serverConfig.baseURL,
    timeout: 5000,
});

// 请求拦截
crissyService.interceptors.request.use(
    (config) => {
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
);

//响应拦截
crissyService.interceptors.response.use(
    (res) => {
        let data = res.data;
        
        
        return data;	//这里的 data 在返回时会被封装成哟个Promise 对象
    },
    (error) => {
        let message = "";
        
        }
        return Promise.reject(message);
    }
);

export default crissyService;

2）、使用 aysnc 声明的函数的返回值

    const test = async function () {
      let message = "Crissy will be the Great!";
      return message;
    };

    console.log(test());

执行结果：

3）、使用Promise 对象的 .then()方法的返回值

    const test = async function () {
      let message = "Crissy will be the Great!";
      return message;
    };

    const crissyTest = test().then((res) => {
      console.log(res);
      return res;
    });

    console.log("crissyTest  =>", crissyTest);

执行结果（请忽略其执行顺序）

三、如何将Promise 对象封装的结果值取出来

1）、await 出来（await 只能在async 声明的函数中使用）

    const test = async function () {
      let message = "Crissy will be the Great!";
      return message;
    };

    const crissyTest = async function() {
      console.log(await test());
    };

    crissyTest();

执行结果（变为普通的字符串）：

2）、使用promise 对象封装的 .then 方法

    const test = async function () {
      let message = "Crissy will be the Great!";
      return message;
    };

    const crissyTest = test().then((res) => {
      console.log(res);
    });

执行结果和上面一样

四、实际开发中处理Promise 对象（Vue3）

  setup() {
    // 先定义一个对象，用来接收返回的数据 （利用其作用域接收）
    let cardInfos = reactive({
      list: [],
    });

    // 向后端请求数据
    const getCardInfo = function () {
      let params = {
        pageNum: 1,
        pageSize: 2,
      };
    //getCardInfoAPI 是经axios 封装后的函数
      getCardInfoAPI(params).then((result) => {
        cardInfos.list = result.data;	//将数据从Promise 对象中提前出来
      });
    };

    getCardInfo();//调用函数，可以放在钩子函数中      
    return {
      cardInfos,
    };