vue中axios和ajax区别是：
- axios是通过promise实现对ajax技术的一种封装，而ajax则是实现了网页的局部数据刷新。
- axios可以说是ajax，而ajax不止是axios。
- 用法相同，但个别参数不同。
- jQuery ajax
$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} });
传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。
- axios
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response))
axios({ method: 'GET', url: url, }) .then(res => {console.log(res)}) .catch(err => {console.log(err)})
axios({ url: url, method: 'get', responseType: 'json', // 默认的 data: { //'a': 1, //'b': 2, } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); })
从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF
- 从浏览器中创建 XMLHttpRequest
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口（重要，方便了很多的操作）
- 从 node.js 创建 http 请求
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
并发请求
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }));
- fetch
fetch号称是ajax的替代品，它的API是基于Promise设计的，旧版本的浏览器不支持 Promise，需要使用 polyfill es6-promise
// 原生XHR var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) // 从服务器获取数据 } } xhr.send() // fetch fetch(url).then(response = > { if (response.ok) { response.json() } }).then(data = > console.log(data)). catch (err = > console.log(err))
看起来好像是方便点，then链就像之前熟悉的callback。
在MDN上，讲到它跟jquery ajax的区别，这也是fetch很奇怪的地方：
当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。 默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）
感觉还不如jquery ajax好用，但是搭配上async/await会让异步代码更加优雅
async function test() { let response = await fetch(url); let data = await response.json(); console.log(data) }
其实也并不完美，async/await是ES7的API，目前还在试验阶段，还需要我们使用babel进行转译成ES5代码
需要提一下，fetch是比较底层的API，很多情况下都需要我们再次封装如：
// jquery ajax $.post(url, {name: 'test'}) // fetch fetch(url, { method: 'POST', body: Object.keys({name: 'test'}).map((key) => { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&') })
由于fetch是比较底层的API，所以需要我们手动将参数拼接成’name=test’的格式，而jquery ajax已经封装好了。所以fetch并不是开箱即用
另外，fetch还不支持超时控制
优缺点：
- 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
- 更好更方便的写法
- 更加底层，提供的API丰富（request, response）
- 脱离了XHR，是ES规范里新的实现方式
1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以
