如何搜索asp网站,曲靖网站设计,c#做网站,seo外链发布不定期更新#xff0c;建议关注收藏点赞。 目录 AxiosAJAXCORS 允许跨域请求 Fetch Axios
axios 是一个基于 Promise 的 JavaScript HTTP 客户端#xff0c;用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求#xff0c;并处理请求的结果。axios …不定期更新建议关注收藏点赞。 目录 AxiosAJAXCORS 允许跨域请求 Fetch Axios
axios 是一个基于 Promise 的 JavaScript HTTP 客户端用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求并处理请求的结果。axios 主要用于与服务器进行数据交互比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的 fetch APIaxios 提供了更多的功能和便利特别是在处理请求和响应时。
axios.get(/api/todolist)
.then((res){console.log(res.data);this.setState((){return {list: [...res.data]}})
.catch((){alert(error)})
}安装 axios
如果你使用的是 Node.js 或者 React 等项目首先需要通过 npm 或 yarn 安装 axios。
# 使用 npm 安装
npm install axios# 使用 yarn 安装
yarn add axios基本用法
axios 提供了多种方法来发送 HTTP 请求包括 axios.get()、axios.post()、axios.put()、axios.delete()等。
发送 GET 请求
import axios from axios;axios.get(https://api.example.com/data).then(response {console.log(response.data); // 响应数据}).catch(error {console.error(Error fetching data:, error);});get 方法用于发送 GET 请求。response.data 包含了从服务器返回的数据。
发送 POST 请求
import axios from axios;const data {name: John Doe,email: johnexample.com
};axios.post(https://api.example.com/users, data).then(response {console.log(User created:, response.data);}).catch(error {console.error(Error posting data:, error);});post 方法用于发送 POST 请求。请求体中的数据data会被发送到服务器。
发送 PUT 请求
import axios from axios;const updatedData {name: Jane Doe,email: janeexample.com
};axios.put(https://api.example.com/users/1, updatedData).then(response {console.log(User updated:, response.data);}).catch(error {console.error(Error updating data:, error);});put 方法用于发送 PUT 请求。它通常用于更新现有的资源。
发送 DELETE 请求
import axios from axios;axios.delete(https://api.example.com/users/1).then(response {console.log(User deleted:, response.data);}).catch(error {console.error(Error deleting data:, error);});delete 方法用于删除指定的资源。
请求配置
axios 支持配置请求的各个方面如 headers、params、timeout 等。你可以通过第二个参数传递一个配置对象来设置这些选项。
示例设置请求头
import axios from axios;axios.get(https://api.example.com/data, {headers: {Authorization: Bearer your_token_here}
}).then(response {console.log(response.data);}).catch(error {console.error(Error:, error);});示例设置请求超时
import axios from axios;axios.get(https://api.example.com/data, {timeout: 5000 // 设置超时时间为 5 秒
}).then(response {console.log(response.data);}).catch(error {if (error.code ECONNABORTED) {console.log(Request timeout);} else {console.error(Error:, error);}});拦截器Interceptors
axios 提供了拦截器机制使得你可以在请求发送之前或响应返回之后执行一些逻辑。
请求拦截器
import axios from axios;axios.interceptors.request.use(config {console.log(Request Interceptor:, config);// 在发送请求之前做些什么比如添加 token 等config.headers[Authorization] Bearer your_token_here;return config;
}, error {return Promise.reject(error);
});响应拦截器
import axios from axios;axios.interceptors.response.use(response {console.log(Response Interceptor:, response);return response;
}, error {console.error(Response Error:, error);return Promise.reject(error);
});请求拦截器可以在请求发送之前修改请求的配置。响应拦截器可以在响应返回之后处理响应数据或者捕获错误。
取消请求
有时你可能需要取消一个正在进行的请求axios 提供了 CancelToken 来实现这一功能。
import axios from axios;const cancelToken axios.CancelToken;
const source cancelToken.source();axios.get(https://api.example.com/data, {cancelToken: source.token
}).then(response {console.log(response.data);}).catch(error {if (axios.isCancel(error)) {console.log(Request canceled:, error.message);} else {console.error(Error:, error);}});// 取消请求
source.cancel(Operation canceled by the user.);并发请求
axios 还可以让你同时发送多个请求并在它们全部完成后进行处理使用 axios.all 和 axios.spread 来实现。
import axios from axios;const request1 axios.get(https://api.example.com/data1);
const request2 axios.get(https://api.example.com/data2);axios.all([request1, request2]).then(axios.spread((response1, response2) {console.log(Response 1:, response1.data);console.log(Response 2:, response2.data);})).catch(error {console.error(Error:, error);});处理错误
axios 会将所有错误统一通过 catch 捕获。你可以通过 error.response 来访问服务器返回的错误信息。
import axios from axios;axios.get(https://api.example.com/data).then(response {console.log(response.data);}).catch(error {if (error.response) {// 服务器返回了响应console.error(Response error:, error.response);} else if (error.request) {// 请求已发出但没有收到响应console.error(Request error:, error.request);} else {// 发生了其他错误console.error(Error:, error.message);}});axios v.s. AJAX v.s. fetch
axios 在前端开发中具有较高的使用率fetch 作为原生 API 也被广泛采用而 XMLHttpRequest 的使用率相对较低。
特性AJAX (XMLHttpRequest)Fetch APIAxios基于回调函数PromisePromise请求响应处理需要手动管理请求状态和解析响应自动解析 JSON但仍需要手动处理错误自动解析 JSON无需手动处理响应数据请求和响应拦截器无无支持请求和响应拦截器跨域请求需要额外配置 CORS 头需要额外配置 CORS 头支持自动处理跨域请求需要后端支持请求取消需要使用 AbortController需要使用 AbortController支持请求取消直接使用 CancelToken浏览器兼容性在所有浏览器中都能工作但老旧浏览器不支持大多数现代浏览器支持但 IE 需要 polyfill支持现代浏览器和 IE需要 polyfill支持的功能基本的 HTTP 请求功能基本的 HTTP 请求功能更丰富的功能请求/响应拦截器、取消请求等使用难度相对较复杂需要手动管理请求状态和响应解析简单支持 Promise且 API 直观简单且有更多的功能和配置选项
axios与python requests库
功能Axios (JavaScript)Requests (Python)异步操作基于 Promise支持 async/await同步请求需要配合 aiohttp 异步库自动解析响应自动解析 JSON自动解析 JSON请求拦截器/响应拦截器支持请求和响应拦截器不支持直接的拦截器功能取消请求支持 CancelToken 来取消请求无原生支持取消请求跨域请求处理跨域请求CORS不涉及浏览器跨域由后端控制浏览器支持支持现代浏览器仅支持 Python 环境 低级 HTTP 请求通常是指在较低的抽象层次上进行的 HTTP 请求通常需要开发者手动处理许多细节例如请求头、参数、响应处理、编码等。相比高级 HTTP 请求低级 HTTP 请求提供了更多的灵活性和控制但也要求开发者更了解底层的 HTTP 协议和细节。 python中类似的库requests、httpx、aiohttp、urllib、pycurl、tornado后端开发使用。
AJAX
AJAXAsynchronous JavaScript and XML本身并不属于 HTML。它是一个基于 JavaScript 的技术用于实现网页的异步请求和更新。因此AJAX 更准确地说是 JavaScript 技术而不是 HTML 技术。 AJAXAsynchronous JavaScript and XML是一个用于创建动态和交互式网页的技术它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种方式能提高用户体验因为它使得网页加载更加流畅用户可以与页面进行交互而无需等待页面的完全刷新。 尽管它的名字中有 “XML”但现在 AJAX 主要用于通过 JSONJavaScript Object Notation与服务器交换数据。不过它也支持通过 XML、HTML 或纯文本等格式进行数据交换。
AJAX 的工作原理 AJAX 允许浏览器在后台发送 HTTP 请求到服务器获取数据并在不刷新页面的情况下更新网页内容。通常AJAX 使用 JavaScript 与服务器进行通信通过 XMLHttpRequest 对象或现代的 fetch API 来发送请求。 AJAX 的基本流程如下 用户发起请求例如点击按钮或加载页面时。 JavaScript 使用 XMLHttpRequest 或 fetch() 向服务器发送请求GET、POST 等。 服务器接收请求处理数据并返回响应。 JavaScript 处理服务器返回的数据并更新页面内容。 什么是 XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据。 XMLHttpRequest 对象能够 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 responseText 只适用于文本响应。如果服务器返回的是 JSON 或 XML 数据可以使用 JSON.parse(req.responseText) 来将其转换为 JavaScript 对象或使用 req.responseXML 获取 XML 格式的响应。
readyState 表示当前请求的状态。 XMLHttpRequest 的请求生命周期有 5 个阶段0 到 4表示请求的不同状态 0 - UNSENT对象已创建但尚未调用 open() 方法。 1 - OPENED已调用 open()但尚未调用 send()。 2 - HEADERS_RECEIVED已发送请求并且已接收到响应头。 3 - LOADING正在下载响应体。 4 - DONE响应已完全下载处理完成。 status 表示 HTTP 响应的状态码。
例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX Example/title
/head
bodyh1AJAX Example/h1button idloadDataLoad Data/buttondiv idresult/div !-- 结果将显示在这里 --script srcapp.js/script
/body
/html// 获取按钮和结果展示区域
const button document.getElementById(loadData);
const result document.getElementById(result);// 添加点击事件监听器
button.addEventListener(click, function() {// 创建一个新的 XMLHttpRequest 对象const xhr new XMLHttpRequest();// 配置请求GET 请求指向一个 JSON 文件xhr.open(GET, data.json, true); // 异步请求// 设置 onload 事件处理函数xhr.onload function() {if (xhr.status 200) { // 如果请求成功const data JSON.parse(xhr.responseText); // 解析返回的 JSON 数据result.innerHTML Message: ${data.message}; // 显示结果} else {result.innerHTML Error loading data;}};// 发送请求xhr.send();
});
XMLHttpRequest对象的open()方法有3个参数第一个参数指定是GET还是POST第二个参数指定URL地址第三个参数指定是否使用异步默认是true所以不用写。 注意尽量不要把第三个参数指定为false否则浏览器将停止响应直到AJAX请求完成。如果这个请求耗时10秒那么10秒内你会发现浏览器处于“假死”状态。 最后调用send()方法才真正发送请求。GET请求不需要参数POST请求需要把body部分以字符串或者FormData对象传进去。
上面代码的URL使用的是相对路径。如果你把它改为’http://www.sina.com.cn/再运行肯定报错。在Chrome的控制台里还可以看到错误信息。 这是因为浏览器的同源策略导致的。默认情况下JavaScript在发送AJAX请求时URL的域名必须和当前页面完全一致。 完全一致的意思是域名要相同www.example.com和example.com不同协议要相同http和https不同端口号要相同默认是:80端口它和:8080就不同使用 JavaScript 请求外域即跨域请求时通常会遇到 跨域资源共享 (CORS, Cross-Origin Resource Sharing) 的限制。默认情况下浏览器会阻止网页发起跨域请求以保护用户的安全。为了绕过这个限制目标网站必须明确允许你的域名进行请求。
CORS 允许跨域请求
用JavaScript怎么请求外域就是其他网站的URL了呢
使用 fetch() API推荐 现代浏览器支持 fetch()可以发起跨域请求但前提是目标网站支持 CORS。如果目标网站没有明确设置允许跨域访问那么请求会被浏览器阻止。如果目标网站支持 CORS 并正确设置了头部例如 Access-Control-Allow-Origin请求就会成功。
fetch(https://example.com/data, {method: GET, // 或者 POST取决于你的请求类型headers: {Content-Type: application/json},mode: cors // 必须设置为 cors表示进行跨域请求
}).then(response response.json()) // 解析 JSON 数据.then(data console.log(data)) // 处理返回的响应.catch(error console.error(Error:, error)); // 错误处理fetch(https://example.com).then(response {if (!response.ok) {throw new Error(Network response was not ok);}return response.text(); // 将响应转换为文本HTML}).then(html {console.log(html); // 打印出返回的 HTML 文本}).catch(error {console.error(There has been a problem with your fetch operation:, error);});
使用 XMLHttpRequest旧版 XMLHttpRequest 是发起 HTTP 请求的传统方式它也可以用于发起跨域请求但依赖于目标网站的 CORS 设置。
var xhr new XMLHttpRequest();
xhr.open(GET, https://example.com/data, true);
xhr.setRequestHeader(Content-Type, application/json);
xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {console.log(JSON.parse(xhr.responseText));}
};
xhr.send();Fetch
例子使用 fetch() API 替代 XMLHttpRequest fetch() 是现代浏览器提供的一个 API使用 Promise,比 XMLHttpRequest 更简洁更强大的功能fetch() 支持更多的功能如设置请求头、控制超时等。并且它默认支持异步操作。这里是相同请求的 fetch() 版本
const button document.getElementById(loadData);
const result document.getElementById(result);button.addEventListener(click, function() {// 使用 fetch 发起请求fetch(data.json).then(response response.json()) // 解析返回的 JSON.then(data {result.innerHTML Message: ${data.message}; // 显示数据}).catch(error {result.innerHTML Error loading data;console.error(error);});
});
