大佬教程收集整理的这篇文章主要介绍了最详细且易懂的Ajax、promise、axios知识，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
转载自：ajax、Promise、axios总结 - 知乎 (zhihu.com)
ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
//手写实现ajaxvar request = new XMLhttprequest()request.open('GET', '/a/b/c?name=ff', truE);request.onreadystatechange = function () { if(request.readyState === 4 && request.status === 200) { console.log(request.responseText); }};request.send();Promise
1.Promise的作用主要用于异步计算可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作promise，帮助我们处理队列
2.理解promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）并未剥夺函数return的能力，因此无需层层传递callBACk，进行回调获取数据代码风格，容易理解，便于维护多个异步等待合并便于解决
3.案例new Promise( function (resolve, reject) { // 一段耗时的异步操作 resolve('成功') // 数据处理完成 // reject('失败') // 数据处理出错 }).then( (res) => {Console.log(res)}, // 成功 (err) => {Console.log(err)} // 失败)resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去处。
4.promise有三个状态pending[待定]初始状态fulfilled[实现]操作成功rejected[被否决]操作失败当promise状态发生改变，就会触发then()里的响应函数处理后续步骤。
promise状态一经改变，不会再变Promise对象的状态改变，只有两种可能：从pending变为fulfilled从pending变为rejected。这两种情况只要发生，状态就凝固了，不会再变了
5.错误处理两种做法第一种：reject('错误信息').then(() => {}, () => {错误处理逻辑})第二种：throw new Error('错误信息').catch( () => {错误处理逻辑})推荐使用第二种方式，更加清晰好读，并且可以捕获前面所有的错误（可以捕获N个then回调错误）
6.APIPromise.all([promise1, promise2]).then(success1, fail1)promise1和promise2都成功才会调用success1
Promise.race([promise1, promise2]).then(success1, fail1)promise1和promise2只要有一个成功就会调用success1；promise1和promise2只要有一个失败就会调用fail1；总之，谁第一个成功或失败，就认为是race的成功或失败。
7.手写Promiseclass Promise { queue1 = [] // queue1 为了容纳成功之后的函数们 queue2 = [] // queue2 为了容纳失败之后的函数们 constructor(fn){ // new Promise(fn) const resolve = (data)=>{ // fn 接受 resolve 并在成功的时候调用 setTimeout(()=>{ // 要等一会，否则 queue1 和 queue2 为空 for(let i =0;i<this.queue1.length;i++){ this.queue1[i](data) } }) } const reject = (reason)=>{ setTimeout(()=>{ for(let i =0;i<this.queue2.length;i++){ this.queue2[i](reason) } }) } fn(resolve, reject) } then(s, E){ this.queue1.push(s) this.queue2.push(E) return this }}p1 = new Promise((resolve, reject)=>{ console.log('hi2'); if(Math.random()>0.5){ resolve('大') }else{ reject('小') }})p1.then((data)=>{Console.log('成功')}, (reason)=>{Console.log('失败')}).then(()=>{Console.log('成功2')}, ()=>{Console.log('失败2')}).then(()=>{Console.log('成功3')}, ()=>{Console.log('失败3')})axios
1.作用支持node端和浏览器端:同样的API，node和浏览器全支持，平台切换无压力支持 Promise:使用Promise管理异步，告别传统callBACk方式丰富的配置项:支持拦截器等高级配置
2.特性从浏览器中创建 XMLhttprequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF
3.案例//get请求axios.get('/user', { params: { ID: 12345 } }) .then(function (responsE) { console.log(responsE); }) .catch(function (error) { console.log(error); });
//post请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (responsE) { console.log(responsE); }) .catch(function (error) { console.log(error); });
//并发多个请求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) { // 两个请求现在都执行完成 }));
4.axios APIaxios(config)// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});axios(url[, config])// 发送 GET 请求（默认的方法）axios('/user/12345');列举axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
5.创建实例//axios.create([config])const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}});列举axios#request(config)axios#get(url[, config])axios#delete(url[, config])axios#head(url[, config])axios#options(url[, config])axios#post(url[, data[, config]])axios#put(url[, data[, config]])axios#patch(url[, data[, config]])
6.拦截器// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
// 添加响应拦截器axios.interceptors.response.use(function (responsE) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
7.移除拦截器const myInterceptor = axios.interceptors.request.use(function () {/*...*/});axios.interceptors.request.eject(myInterceptor);
8.自定义 axios 实例添加拦截器const instance = axios.create();instance.interceptors.request.use(function () {/*...*/});
9.错误处理axios.get('/user/12345') .catch(function (error) { if (error.responsE) { console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { console.log(error.request); } else { console.log('Error', error.messagE); } console.log(error.config); });ajax、Promise、axios的对比
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装axios是ajax ajax不止axios
优缺点：
ajax：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：从 node.js 创建 http 请求支持 Promise API客户端支持防止CSRF提供了一些并发请求的接口（重要，方便了很多的操作）
为什么vue不使用ajax用axios：axios 是一个基于Promise 用于浏览器和 nodejs 的 http 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：从浏览器中创建 XMLhttprequest支持 Promise API客户端支持防止CSRF提供了一些并发请求的接口（重要，方便了很多的操作）从 node.js 创建 http 请求拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据
以上是大佬教程为你收集整理的最详细且易懂的Ajax、promise、axios知识全部内容，希望文章能够帮你解决最详细且易懂的Ajax、promise、axios知识所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。