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>

浙公网安备 33010602011771号