一，【axios】依赖安装
前后端通信通常使用 AJAX 方案，对于 AJAX 社区有非常多的封装，目前主流推荐 axios
- 安装 Axios
二，【axios】创建request.js
- 创建axios实例
- 拦截器处理
/**
* @file 封装axios拦截器
*/
import axios from 'axios';
const release = 'http://' + window.location.host + '/';
const local = 'http://localhost:3000';
const {token} = JSON.parse(getCookie(USER_COOKIE) || '{}');
/* 创建axios实例 */
const service = axios.create({
baseURL: release
timeout: 50000
});
//service.defaults.withCredentials =true;//让ajax携带cookie (这个必须要，否则无法跨域携带cookie)
service.defaults.headers.Authorization = token;
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/* request拦截器 */
service.interceptors.request.use(
config => {
// 请求发生前处理
const _params = getUrlParams();
config.params = {
...config.params,
..._params
};
return config;
},
error => {
// 请求错误处理
Promise.reject(error);
}
);
/* 响应-拦截器 */
service.interceptors.response.use(
response => {
// 响应数据处理
return response.data;
},
error => {
// 异常处理
const url = '/login?' + encodeURI(`redirect=${encodeURI(window.location.href)}`);
// 鉴权失败
if (error.response && error.response.status === 401) {
window.location.href = url;
} else if (error.response && error.response.status === 500) {
message.error(error.response.data || '请求超时，请稍后重试~');
} else {
void null;
}
return {
// 响应错误处理
error: true,
message: error.response && error.response.data
};
}
);
export default service;
三，【axios】请求封装
import service from '../../utils/request'
/**
* POST 请求封装
*/
export function apiPost(url, data) {
return service.request({
url: url,
method: 'post',
data
})
}
/**
* GET 请求封装
*/
export function apiGet(url, data) {
return service.request({
url: url,
method: 'get',
data
})
}
/**
* PUT 请求封装
*/
export function apiPut(url, data) {
return service.request({
url: url,
method: 'put',
data
})
}
四， 【axios】直接使用 axios 进行通信
通常情况下，AJAX 请求都是异步的，因此 axios 默认返回一个 Promise，因此你可以通过 Promise 或者 async/await 的方式调用：
两种调用方式：
- async/await 方式使用
- Promise 方式调用
import axios from 'axios';
// async/await 方式使用
async function getUser() {
try {
const response = await axios.get('/list', {
params: {
status: 'created'
}
});
console.log(response);
} catch (error) {
console.error(error);
}
}
// Promise 方式调用
axios.get('/list', {
params: {
status: 'created'
}
})
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle network error
console.log(error);
})
// 发送 POST 请求
axios({
method: 'post',
url: '/list/11',
// request query
params: {
status: 'releated'
},
// request body
data: {
a: 'a1',
b: 'b2'
}
});
五，ajax 与 axios 与 fetch 对比
- Ajax的基础api是浏览器提供的xmlhttprequest
- axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本
- fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
六，参考
七，ajax，axios实现原理
ajax的实现
const Ajax={
get: function(url, fn) {
// XMLHttpRequest对象用于在后台与服务器交换数据
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
// readyState 为4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200) {
// 从服务器获得数据
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
// datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
post: function (url, data, fn) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
// 添加http头，发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200)) {
fn.call(this, xhr.responseText);
}
};
xhr.send(data);
}
}
## axios
const myAxios = {
get: function(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText)
}
};
xhr.send();
})
}
八，总结
- axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式
- ajax 首先实例一个XMLHttpRequest对象，用其中的
open方法建立连接；send方法传输数据（前端传到后台）；然后再利用onreadystatechange监听readyState的变化，当其为4时，代表请求完成 - fetch也加入了promise，解决了回调地狱的问题；使用fetch虽然简单，但是也有一些问题需要注意：
- cookie传递
必须在header参数里面加上credientials: ‘include’，才会如xhr一样将当前cookies带到请求中去
- fetch和xhr的不同
fetch虽然底层，但是还是缺少一些常用xhr有的方法，比如能够取消请求（abort）方法 fetch在服务器返回4xx、5xx时是不会抛出错误的，这里需要手动通过，通过response中的ok字段和status字段来判断
- cookie传递
