最详细且易懂的Ajax、promise、axios知识

本文主要是介绍最详细且易懂的Ajax、promise、axios知识，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

转载自：ajax、Promise、axios总结 - 知乎 (zhihu.com)

ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

//手写实现ajax
var 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.API
Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才会调用success1

Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1；
promise1和promise2只要有一个失败就会调用fail1；
总之，谁第一个成功或失败，就认为是race的成功或失败。

7.手写Promise
class 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 API
axios(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知识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！