自媒體網(wǎng)站開發(fā)充電寶關(guān)鍵詞優(yōu)化
概述
前后端網(wǎng)絡(luò)請求工具
- 原生ajax
- fetch api
- axios
GET和POST請求
get只能發(fā)純文本
post可以發(fā)不同類型的數(shù)據(jù)，要設(shè)置請求頭，需要告訴服務(wù)器一些額外信息
測試服務(wù)器地址
有一些公共的測試 API 可供學(xué)習(xí)和測試用途。這些 API 允許你發(fā)送 HTTP 請求（GET、POST 等），并從服務(wù)器獲取響應(yīng)。以下是一些常用的公共測試 API：
- JSONPlaceholder:
- Base URL: https://jsonplaceholder.typicode.com
- Example Endpoints:
- Posts:
/posts - Comments:
/comments - Users:
/users
- Posts:
- Usage Example (GET): https://jsonplaceholder.typicode.com/posts/1
- ReqRes:
- Base URL: https://reqres.in
- Example Endpoints:
- Users:
/api/users - Single User:
/api/users/2 - Create User:
/api/users
- Users:
- Usage Example (POST): https://reqres.in/api/users
原生ajax
前端頁面代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="ajax_get.js"></script>
</body>
</html>
GET
//原生ajax
const xhr = new XMLHttpRequest();
//xhr.open('GET', 'http://wuyou.com/common/get');
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
xhr.send();
xhr.onreadystatechange = function(){if(xhr.readyState == XMLHttpRequest.DONE && xhr.status === 200){console.log(JSON.parse(xhr.responseText));}
}
返回結(jié)果
POST
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json'); // 修改 Content-Type
xhr.send(JSON.stringify({title: 'foo',body: 'bar',userId: 1
}));xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {console.log(xhr.responseText); // 不解析 JSON，直接輸出響應(yīng)文本}
};
返回結(jié)果
Axios
前端頁面代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="axios.min.js"></script>
<script src = 'axiosjs.js'></script>
</body>
</html>
直接傳輸
最簡單的axios使用方式，get函數(shù)中填寫請求的url
//用axios來get一個(gè)請求
axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {console.log('GET Response:', response.data);}).catch(error => {console.error('GET Error:', error);});
返回結(jié)果
異步傳輸
用異步的方式傳輸，在axios中配置地址，請求/響應(yīng)攔截器
//異步請求處理
//異步發(fā)送get請求
(async () => {try {const ins = axios.create({baseURL: 'https://jsonplaceholder.typicode.com',});// 請求攔截器ins.interceptors.request.use((config) => {console.log('發(fā)送了請求');return config;});// 響應(yīng)攔截器ins.interceptors.response.use((response) => {// 在這里可以對響應(yīng)數(shù)據(jù)進(jìn)行處理return response.data;},(error) => {// 在這里處理響應(yīng)錯(cuò)誤return Promise.reject(error);});const res = await ins.get('/posts/1');const res2 = await ins.post('/posts', {title: 'foo',body: 'bar',userId: 1,});console.log('GET 的結(jié)果:', res);console.log('POST 的結(jié)果:', res2);} catch (error) {console.error('發(fā)生錯(cuò)誤:', error);}
})();
返回結(jié)果
Fetch
前端頁面代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src = 'fetch_get.js'></script>
</body>
</html>
GET請求
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => {if(res.ok){return res.json()}
})
.then(data =>{console.log(data)}).catch(error =>{console.error(error)
})
結(jié)果：
POST請求
在參數(shù)處需要傳入一些配置項(xiàng)
//post在參數(shù)的地方需要傳入一些配置項(xiàng)const postData = {title: 'foo',body: 'bar',userId: 1
};
console.log("test")
fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers:{'Content-Type': 'application/json'},body:JSON.stringify({postData})}
).then(res =>{if(res.ok){return res.json()}
})
.then(data =>{console.log(data)}
)
結(jié)果
