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

猿耳盗铃

已于 2023-10-11 16:35:38 修改

阅读量1.9k

点赞数

分类专栏： vue3 typescript node 文章标签： vue.js javascript 前端

于 2023-03-21 20:41:17 首次发布

本文链接：https://blog.csdn.net/qq_37609787/article/details/129696937

版权

vue3 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

node

5 篇文章 0 订阅

订阅专栏

typescript

4 篇文章 0 订阅

订阅专栏

本教程介绍了如何使用VueCLI4.5.0以上版本创建项目并运行。首先，通过npm全局安装VueCLI，然后创建名为my-project的项目。接着，进入项目目录，安装依赖并启动开发服务器。在项目中，通过setup函数模拟接口调用，使用Promise处理异步数据，展示数据加载和错误处理的示例。

摘要由CSDN通过智能技术生成

步骤一：使用脚手架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
            });
        });

    },