vue3+ts模拟调用接口（vue3零基础保姆篇）

步骤一：使用脚手架vue-cli4.5.0以上创建项目

1、安装脚手架

npm install -g @vue/cli

2、创建项目

vue create my-project

步骤二：运行项目

1、进入项目

cd my-project

2、安装依赖

npm install

3、运行项目

npm run dev

步骤三：

替换index.vue中setup里面的代码为下面代码即可实现

setup() {
        //   模拟调用接口
        function getRemoteData() {
            return new Promise<any[]>((resolve,reject) => {
                setTimeout(() => {
                     // 模拟接口调用有概率出错
                    if (Math.random() > 0.5) {
                        resolve([
                            {
                                key: 1,
                                name: '苹果',
                                value: 1,
                            },
                            {
                                key: 2,
                                name: '香蕉',
                                value: 2,
                            },
                            {
                                key: 3,
                                name: '橘子',
                                value: 3,
                            },
                        ]);
                    } else {
                        reject(new Error('不小心出错了！'));
                    }    
                }, 3000);
            });
        }

        const optionsArr = ref<any[]>([]);

        onMounted(() => {
            getRemoteData().then((data) => {
                optionsArr.value = data;
                console.log(data)
            })
            .catch((e) => {
                console.log(e.message)
            })
            .finally(() => {
                // 接口调取结束之后关闭loading
            });
        });

    },