Promise 与 Axios 的一些学习心得记录

简介: Promise 与 Axios 的一些学习心得记录


一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者,可拜上将军也。


学习心得

Promise

then:里面有两个回调

  • promise原型上提供了 then catch finally 三个方法,使用这几个方法都会返回一个全新的 Promise 实例,这个 Promise 实例也有其状态和 Value,它的这个状态和 Value 取决于该实例中某个函数执行的结果是否报错,return 的值是其 Value 值。如果后面再来一个 .then,那么它执行哪个回调以及它的 Value 值,是取决于上一个.then的回调是否执行成功和返回的 Value 值的(特殊情况:如果其方法中返回的是一个新的Promise实例,他会按照这个实例最终的状态和结果,决定下一个then中执行哪个回调)。
  • Promise的向下顺延体制,是因为Promise内部给我们加了方法进行顺延。
new Promise(function executor(resolve) { 
     // 这里是要执行异步操作代码
     let ran = Math.random()
     ran > 0.5 ? resolve(1) : reject(0) // => 改变PROMISE实例的状态,并将 1 / 0
}).then(function onFulFilled(x) {
    retuen 100
    // return new Promise()
},function onRejected(y) {
}).then(null,function onRejected(y) {
}).then(function onFulfilled(x) {
    // => 因为上一个then中是没有成功处理函数的,PROMISE内部会帮我们自动创建一个onFulfilled 函数,让其执行后的状态还是Fulfilled,也接受并返回了Value值
    return x*10
},function onRejected(y) {
}).then(function onFulFilled(x) {
    throw new Error('')
},function onRejected(y) {
}).then(null,null).then(function onFulFilled(x) {
},function onRejected(y) {
    // =>  因为上一个then中是没有失败处理函数的,PROMISE内部会帮我们自动创建一个 onRejected 函数,让其执行后的状态还是Rejected,也接受并返回了Value值
    console.log(y)
})

catch:里面只有一个回调

// => 创建一个状态为 FulFilled,Value 为 A 的 Promise 实例
Promise.resolve('A').catch(function onRejected(){
})
// => 创建一个状态为 rejected,Value 为 A 的 Promise 实例
Promise.reject('A').catch(function onRejected(){
})

Promise.all:所有都成功,整体状态才成功

Promise.all([Promise1,Promise2,...]).then(function (results) {
    // => 按照顺序存储每一个Promise的Value值[ VALUE1,VALUE2 ...]
})

Primise.race:看Promise实例中谁先得到最后的状态,最后就以它的状态和Value为主

Axios

它比Jquer中的AJAX库牛逼就牛逼在它是基于Promise的设计模式而封装的。

不管3721,第一步我们都是配置好默认项

// => 配置
axios.defaults.baseURL = 'http://127.0.0.1:5500';
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// => 请求拦截器
axios.defaults.transformRequest = function(data) {
    // => DATA: 用户需要传递给服务器的JSON对象
    if(!data) return data;
    let result = ``;
    for(let key in data) {
        if(!data.hasOwnProperty(key)) break
        result += `&${data[attr]}=${data[attr]}`;
    }
    return result.substring(1)
}
// => 响应拦截器
axios.defaults.transformResponse = [function onFulfilled(response) {
    return response.data
},function onRejected(reason){
    return Promise.reject(reason)
}]
// => 发送各种请求以及使用axios.all处理并行
axios.get(URL,{
    params: {
    }
}).then(data => {
}).catch(reason => {
})
axios.post(URL,DATA,{
}).then(data => {})
axios.all([p1,p2,....]).then(results => {})
目录
打赏
0
0
0
0
8
分享
相关文章
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
170 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
从0开始学习JavaScript--JavaScript使用Promise
JavaScript中的异步编程一直是开发中的重要话题。传统的回调函数带来了回调地狱和代码可读性的问题。为了解决这些问题,ES6引入了Promise,一种更现代、更灵活的异步编程解决方案。本文将深入探讨JavaScript中如何使用Promise,通过丰富的示例代码演示Promise的基本概念、链式调用、错误处理等方面的用法,帮助大家更全面地理解和应用Promise。
基于promise用于浏览器和node.js的http客户端的axios
基于promise用于浏览器和node.js的http客户端的axios
96 0
Promise学习
Promise学习
152 55
ES6 中 Promise对象使用学习
ES6 中 Promise对象使用学习
67 1
Axios是一个基于Promise的HTTP客户端
Axios是一个基于Promise的HTTP客户端
68 0
No101.精选前端面试题,享受每天的挑战和学习(Promise)
No101.精选前端面试题,享受每天的挑战和学习(Promise)
JavaScript学习 -- Promise的使用
JavaScript学习 -- Promise的使用
65 0
JavaScript学习 -- axios的使用
JavaScript学习 -- axios的使用
92 0
原来这才是学习axios的正确姿势(安装、使用、跨域代理一站式解决)
Axios 是一个基于 promise 的 异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求,负责与后端交互。
408 1

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    169
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    668
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    309
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    66
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    64
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    147
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    194
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    75
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    52
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    67
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等