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

HelloWorldZ

发布于 2024-03-20 18:54:27

880

发布于 2024-03-20 18:54:27

文章被收录于专栏：前端开发

学习心得

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 => {})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

函数