ajax
- 异步js和xml
- 底层使用XMLHttpRequest
- 通过HTTP协议进行通信
- 容易收到CSRF和XSS攻击
写法
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
headers:{'Content-Type':'application/json;charset=utf8','organId':'1333333333'}, success: function() {},
error: function() {}
});
axios
- 从node.js创建http请求
- 在浏览器中创建XMLHttpRequest
- 支持Promise API
- 提供了一些并发请求的接口
- 支持拦截请求和响应
- 转换请求和响应数据
- 自动转换JSON数据
- 客户端支持防御CSRF/XSRF
写法
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- dataType，是后台接口返回的数据格式
- •”string”: 返回纯文本字符串 ，默认
- •”xml”: 返回 XML 文档，可用 jQuery 处理。
- •”html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- •”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- •”json”: 返回 JSON 数据 。
- •”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- contentType
- Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
- Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
- Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
fetch
-
ES6新属性，基于promise
-
原生js，没有使用XMLHttpRequest对象
-
fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
-
fetch默认不会带cookie，需要添加配置项
-
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行
-
fetch没有办法原生监测请求的进度，而XHR可以
写法
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
