推广网站有哪些方式,wordpress 企业主页,网站文章更新数量,接外贸订单的平台概述
前后端网络请求工具
原生ajaxfetch apiaxios
GET和POST请求
get只能发纯文本
post可以发不同类型的数据#xff0c;要设置请求头#xff0c;需要告诉服务器一些额外信息
测试服务器地址
有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…概述
前后端网络请求工具
原生ajaxfetch apiaxios
GET和POST请求
get只能发纯文本
post可以发不同类型的数据要设置请求头需要告诉服务器一些额外信息
测试服务器地址
有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求GET、POST 等并从服务器获取响应。以下是一些常用的公共测试 API
JSONPlaceholder: Base URL: https://jsonplaceholder.typicode.comExample Endpoints: Posts: /postsComments: /commentsUsers: /users Usage Example (GET): https://jsonplaceholder.typicode.com/posts/1 ReqRes: Base URL: https://reqres.inExample Endpoints: Users: /api/usersSingle User: /api/users/2Create User: /api/users Usage Example (POST): https://reqres.in/api/users
原生ajax
前端页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script srcajax_get.js/script
/body
/htmlGET
//原生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));}
}返回结果 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直接输出响应文本}
};返回结果 Axios
前端页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script srcaxios.min.js/script
script src axiosjs.js/script
/body
/html直接传输
最简单的axios使用方式get函数中填写请求的url
//用axios来get一个请求
axios.get(https://jsonplaceholder.typicode.com/posts/1).then(response {console.log(GET Response:, response.data);}).catch(error {console.error(GET Error:, error);});返回结果 异步传输
用异步的方式传输在axios中配置地址请求/响应拦截器
//异步请求处理
//异步发送get请求
(async () {try {const ins axios.create({baseURL: https://jsonplaceholder.typicode.com,});// 请求拦截器ins.interceptors.request.use((config) {console.log(发送了请求);return config;});// 响应拦截器ins.interceptors.response.use((response) {// 在这里可以对响应数据进行处理return response.data;},(error) {// 在这里处理响应错误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 的结果:, res);console.log(POST 的结果:, res2);} catch (error) {console.error(发生错误:, error);}
})();返回结果 Fetch
前端页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script src fetch_get.js/script
/body
/htmlGET请求
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)
})结果
POST请求
在参数处需要传入一些配置项
//post在参数的地方需要传入一些配置项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)}
)结果
