做第三方库个人网站,建设淘宝联盟购物网站,做企业官网教程,网站建设是半年的持久战1、简述
在Web开发过程中#xff0c;少不了发起Http请求服务端的接口数据#xff0c;在不同的框架中使用了不同的Http请求方式#xff0c;常用的请求有fetch、 ajax、 axios、XMLHttpRequest、request#xff0c;以下样例仅供参考。
2、Fetch
Fetch API 是一种 JavaScr…1、简述
在Web开发过程中少不了发起Http请求服务端的接口数据在不同的框架中使用了不同的Http请求方式常用的请求有fetch、 ajax、 axios、XMLHttpRequest、request以下样例仅供参考。
2、Fetch
Fetch API 是一种 JavaScript API是一种基于 Promise 的现代API用于在网络中发送和接收请求。具有一下特点
更简洁的 API只需要一个函数就可以完成网络请求。基于 Promise支持更直观的异步编程。内置 Request 和 Response 类方便进行请求和响应的处理。支持跨域请求允许在不同域名之间进行数据交互。
2.1 GET
fetch(https://api.example.com/data).then(response response.json()).then(data {console.log(data); // 处理返回的数据}).catch(error {console.error(error); // 处理错误});2.2 POST
const data new FormData();
data.append(name, 张);
data.append(age, 20);
fetch(https://example.com/submit, {
method: POST,
headers: new Headers({
Content-Type: application/x-www-form-urlencoded
}),
body: new URLSearchParams(data)
})
.then(response response.json())
.then(data console.log(data))
.catch(error console.error(error));3、Ajax
Ajax 全称“Asynchronous JavaScript and XML”译为“异步 JavaScript 和 XML”程序员们习惯称之为“阿贾克斯”它并不是一种技术而是多种技术的综合体其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中整个过程不需要重载刷新整个网页可以将网页的内容更快的呈现给用户。
3.1 GET
$.ajax({url: https://api.example.com/data,type: GET,dataType: json,success: function (data) {},error: function () { }
});3.2 POST
let formData new FormData();
formData.append(id, fileId);
$.ajax({url:https://example.com/submit,type: POST,processData: false,contentType: false,data: formData,dataType: json,success: function (data) {},error: function (e) {}
});3.3 Done
从JQuery 1.8$.ajax(的 success() 被替换为 done() error() 被替换为 fail() complete() 被替换为 always() 。
$.ajax({type: POST,url: https://example.com/submit,dataType: json,}).done(function(data){ console.log(data)}).fail(function(jqXHR, textStatus, errorThrown){}).always(function( jqXHR, textStatus ){}); 4、Axios
Axios是一个基于promise的HTTP库类似于jQuery的ajax用于http请求。可以应用于浏览器端和node.js既可以用于客户端也可以用于node.js编写的服务端。
支持Promise API拦截请求与响应比如在请求前添加授权和响应前做一些事情。转换请求数据和响应数据比如进行请求加密或者响应数据加密。取消请求自动转换JSON数据客户端支持防御XSRF
4.1 引用
常用的引入axios方法
script srchttps://unpkg.com/axios/dist/axios.min.js/script 或者通过node npm来安装
npm install axios方法列举GET、POST、PUT、PATCH、DELETE
4.2 GET
let params {};
params.id 1;
axios({method: GET,url: https://api.example.com/data,params:params}).then(res {console.log(res);});或者axios.get(https://api.example.com/data, {params: params}).then(res {console.log(res);}).catch(err {console.log(err);});
4.3 POST
let formData new FormData();
formData.append(id, fileId);
axios.post(https://example.com/submit,formData).then(res{console.log(res,formData)
})5、XMLHttpRequest
XMLHTTPRequest对象顾名思义是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口使得Javascript可以进行HTTP(S)通信。XMLHTTPRequestXHR对象用于与服务器交互我们通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据并且虽然名字叫XMLHTTPRequest但实际上可以用于获取任何类型的数据。
5.1 GET
var xhr new XMLHttpRequest();
xhr.open(GET, https://api.example.com/data);
xhr.send();
xhr.onreadystatechange function(){if ( xhr.readyState 4 xhr.status 200 ) {alert( xhr.responseText );} else {alert( xhr.statusText );}
};5.2 POST
var xhr new XMLHttpRequest();
xhr.open(post, https://example.com/submit, true);
xhr.responseType blob;
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded;charsetUTF-8);
xhr.onload function () {if (xhr.status 200) {var blob new Blob([xhr.response], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream;charsetutf-8})var reader new FileReader();reader.onload function () {console.log(this.result);};reader.readAsArrayBuffer(blob);}
};
xhr.send();6、Request
Node.js是一个基于Chrome V8 JavaScript引擎的开源、跨平台的Javascript运行环境使JavaScript可以脱离浏览器运行。它提供了很多强大的模块使Web开发更轻松。其中request模块是一个使用最广泛的HTTP模块可以用来发送HTTP/HTTPS请求。
添加request模块
npm install request6.1 GET
var request require(request);
request.get(https://api.example.com/data, function(error, response, body) {console.log(body);
});6.2 POST
var request require(request);
request.post(https://example.com/submit, {form:{key:value}}, function(error, response, body) {//上传文件或者其他操作
});
