關于Ajax的封裝詳解
ajax的封裝
一個免費的測試接口
https://api.apiopen.top/getjoke
一、最簡單的原生ajax封裝
- 先看下效果
- 具體代碼
<body>
<div class="box">
<button id="btn">來段數據</button><br>
<textarea id="text" ></textarea>
</div>
<script>
const btn = document.getelementbyid("btn");
const txt = document.getelementbyid("text");
btn.onclick = function(){
getajax('get','https://api.apiopen.top/getjoke',function(res){
let narr=[];
for(let i=0;i<res.length;i++){
narr.push('\n'+(i+1)+'.'+res[i].text)
console.log(res[i].text);
text.innerhtml=narr;
}
});
}
function getajax(method,url,callback){
const xhr = new xmlhttprequest();
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.status>=200 && xhr.status<300){
const res = json.parse(xhr.response);
callback(res.result);
}
}
}
}
</script>二、使用promise函數封裝
promise是es6引入的異步編程的新解決方案，語法上promise是一個構造函數，用來封裝異步操作并可以獲取其成功或者失敗的回調結果。
- 通過promise實例化的對象可以接受一個參數，參數類型為函數，該函數的兩個參數是resolve和reject，
- 在請求到數據后可以通過resolve、resolve函數來改變promise對象的狀態
- resolve表示成功，resolve表示失敗
- 成功或者失敗都可以調用promise對象的then方法
- then接收兩個參數，兩個參數都是函數類型
- 成功的形參為value，失敗的形參為reason
- value就是resolve方法里的返回結果
<script>
const btn = document.getelementbyid("btn");
btn.onclick = function(){
grtajax('get','https://api.apiopen.top/getjoke',function(res){
console.log(res);
});
}
function grtajax(method,url,callback){
const p = new promise((resolve,reject)=>{
const xhr = new xmlhttprequest();
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status >= 200 && xhr.status < 300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
});
p.then(function(value){
const res = json.parse(value);
callback(res.result)
},function(reason){
console.error(reason);
})
}
</script>
三、promise配合async和await使用
async
- async和await兩種語法結合可以讓異步代碼像同步代碼一樣
- async函數的返回值為promise對象
- 該promise對象的結果是由async函數執行的返回值決定的
- 只要返回值的類型不是一個promise類型的對象則async函數的返回結果就是一個成功的promise對象
- 返回值的類型不是一個promise類型的對象則跟promise對象的狀態有關revolve或者reject或者拋出異常
await
- await右側的表達式一般為promise對象，但也可以是其他的值
- 如果是promise對象，await返回的是promise成功的值
- 如果是其他的值，直接將此值作為await的返回值
- await必須寫在async函數中，但是async函數中可以沒有await
- 如果await的promise狀態是失敗的，就會拋出異常，需要通過try…catch捕獲處理
<body>
<button>請求數據</button>
<script>
const btn = document.queryselector('button');
function sendajax(method,url){
return new promise((resolve,reject)=>{
const xhr = new xmlhttprequest();
xhr.responsetype = 'json';
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.status >=200 && xhr.status<300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
}
btn.addeventlistener('click',async function(){
let result = await sendajax('get','https://api.apiopen.top/getjoke');
console.log(result);
})
</script>
</body>四、使用axios工具庫直接發送ajax
axios 是一個基于 promise 網絡請求庫，作用于node.js 和瀏覽器中。 它是 isomorphic 的(即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 xmlhttprequests。
- 這里使用了vue-cli搭建了一個vue項目并下載了 axios
post
get
<template>
<div>
<button @click="post">直接發送post</button>
<button @click="get">直接發送get</button>
</div>
</template>
<script>
export default {
data(){
return{}
},
methods:{
async get(){
const {data:res} = await this.$axios.get('https://api.apiopen.top/getjoke',{
params:{id:1}
});
console.log(res);
},
post(){
this.$axios.post('https://api.apiopen.top/getjoke',{name:'yxj',gender:'男'})
.then((res)=>{
console.log(res.data.result);
});
}
}
}
</script>到此這篇關于關于ajax的封裝詳解的文章就介紹到這了,更多相關ajax的封裝內容請搜索碩編程以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持碩編程！
學習AJAX