axios与promise对数据的处理

使用axios请求数据

首先axios自己是有自己的中文文档的链接是:http://www.axios-js.com/zh-cn/docs/

一般是不需要自己写的,直接用前辈们的封装就好.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // console.log(axios); 

        //使用axios请求数据  axios({})

        axios({
            method:"get", // post  get请求 等其他请求方式  不写默认是get请求
            url:"https://...",
            params:{ // get请求配置参数
                postid:"YT6043540991741",
            }
        }).then(( {data} )=>{
            console.log(data.data,"data");
            let html = ""
            data.data.forEach(element => {
                html += element.context
            });
            box.innerText = html
        }).catch((err)=>{
            console.log(err);
            // alert("数据获取失败")
        })

        
        
    </script>

Promise 对象有以下两个特点:

1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:

  • pending: 初始状态,不是成功或失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。

2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

使用:

 <script>
        // 使用  
         new Promise((res,rej)=>{}) 
            // 默认是等待状态  
            //    由promise回调函数中的 第一个参数决定成功 
            //                          第二个参数决定失败 

        let promise = new Promise((res,rej)=>{
            // res("等待promise 转成  成功状态的promise")
            // rej("等待promise 转成  失败状态的promise")
            
            // 成功和失败 是自己设置的
            // 状态一旦发生变化 就不会改变了
        })
        console.log(promise);  // pending状态的promise
        console.log(promise);  // fulfilled 转态的promise
           console.log(promise);  // rejected 
        
        let promise = new Promise((res,rej)=>{
            // res("等待promise 转成  成功状态的promise")
            // rej("等待promise 转成  失败状态的promise")
            
            // 成功和失败 是自己设置的
            // 状态一旦发生变化 就不会改变了 同时会触发.then函数

            setTimeout(()=>{
                res("成功123")
            },1000)
        })

        promise.then(
            (succes)=>{
                console.log(succes,"成功");
            },  // 接收成功状态promise数据
            (error)=>{
                console.log(error,"12");
            }   // 接收失败状态promise数据
        )
        
        promise.then((succes)=>{
            console.log(succes,"成功");
        }).catch((error)=>{
            console.log(error,"失败");
        })


        new Promise((res,rej)=>{
            // res("等待promise 转成  成功状态的promise")
            // rej("等待promise 转成  失败状态的promise")
            
            // 成功和失败 是自己设置的
            // 状态一旦发生变化 就不会改变了 同时会触发.then函数

            setTimeout(()=>{
                rej("成功123")
            },1000)
        }).then((succes)=>{
            console.log(succes,"成功");
        }).catch((error)=>{
            console.log(error,"失败");
        })


    </script>

 

posted @ 2021-12-18 14:05  yannee  阅读(716)  评论(0)    收藏  举报
返回顶端