Promise 命令的案例

function foo(){
    return new Promise((resolve,reject)=>{
        let random = Math.random();  //声明随机数
        if(random>0.5){
            resolve(random);
        } else{
            reject(random);
        }
    });
}

//调用
foo().then((a)=>{
    console.log('success:',a);
}).catch((b)=>{
    console.log('error:',b);
});

上面代码中,函数foo返回一个Promise对象,Promise对象的参数为resolve,reject,箭头函数中声明一个随机数,如果大于0.5,则返回resolve,调用then函数,输出success。



cnost p1 = new Promise(function(resolve,reject){
    setTimeout(()=> reject(new Error('fail')),3000)
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(p1),1000
    })
})

p2.then(()=>{
    console.log(result);
}).catch(()=>{
    console.log(error);
});

//4s后返回  Error:fail

上面代码中,p1是一个 Promise,3 秒之后变为rejectp2的状态在 1 秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了 2 秒,p1变为reject,导致触发catch方法指定的回调函数。



new Promise((resolve,reject)=>{
    resolve(1);
    console.log(2);
}).then((a)=>{
    console.log(a);
});

//2
//1

上面代码中,调用resolvereject并不会终结 Promise 的参数函数的执行。



new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

上面代码中,调用resolvereject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolvereject的后面。

 

 

                  ------------------------本文完------------------------

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常感谢您的提问!以下是一个使用 Vue 实现接口封装的案例: 首先,我们需要安装 axios,这是一个用于发送 HTTP 请求的库。可以使用以下命令进行安装: ``` npm install axios ``` 接下来,我们可以创建一个 api.js 文件,用于封装我们的接口: ```javascript import axios from 'axios'; const API_BASE_URL = 'https://example.com/api'; export default { getPosts() { return axios.get(`${API_BASE_URL}/posts`); }, getPost(id) { return axios.get(`${API_BASE_URL}/posts/${id}`); }, createPost(data) { return axios.post(`${API_BASE_URL}/posts`, data); }, updatePost(id, data) { return axios.put(`${API_BASE_URL}/posts/${id}`, data); }, deletePost(id) { return axios.delete(`${API_BASE_URL}/posts/${id}`); }, }; ``` 在这个文件中,我们定义了一些常用的接口方法,例如获取所有文章、获取单个文章、创建文章、更新文章和删除文章。这些方法都返回一个 Promise 对象,可以使用 async/await 或者 .then()/.catch() 进行处理。 接下来,我们可以在 Vue 组件中使用这些接口方法: ```javascript <template> <div> <h1>文章列表</h1> <ul> <li v-for="post in posts" :key="post.id"> <router-link :to="{ name: 'post', params: { id: post.id } }">{{ post.title }}</router-link> </li> </ul> </div> </template> <script> import api from './api'; export default { data() { return { posts: [], }; }, async created() { try { const response = await api.getPosts(); this.posts = response.data; } catch (error) { console.error(error); } }, }; </script> ``` 在这个组件中,我们使用了 api.js 中的 getPosts() 方法来获取所有文章,并将结果保存在组件的 data 中。在 created 生命周期钩子中,我们使用 async/await 来处理异步请求,并使用 try/catch 来捕获错误。 以上就是一个简单的使用 Vue 实现接口封装的案例。希望能对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值