快速入门，理解，使用 axios请求
为什么选择axios
区分Ajax,Jquery Ajax,Fetch, Axios
-
Ajax:
ajax自然不必说，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。 -
Jquery Ajax：
jQuery框架中的发送后端请求技术，对原生XHR的封装，除此以外还增添了对JSONP的支持。
随着三大主流框架的盛行，jQuery也开始有廉颇老矣尚能饭否之势
主要的缺点有：- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
- JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
-
Fetch：
Fetch号称是AJAX的替代品，使用了ES6中的promise对象。Fetch是基于promise设计的，支持asynv/await；它更加底层，拥有丰富的API； 脱离了XHR；语法简单，也更加语义化。
fetch 是一个相当底层的 API，在实际项目使用中，需要做各种各样的封装和异常处理，而并非开箱即用。其存在许多常见问题。
例如：- fetch请求对某些错误http状态不会reject
- 不支持JSONP
- fetch默认不会带cookie，需要添加配置项
更多fetch问题大家也可以参考： 《fetch 没有你想象的那么美》
-
axios：
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，其本质上也是对原生XHR的封装，符合最新ES规范。Axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。
axios的特性
1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
axios的使用
axios的安装
使用npm:
npm install axios --save
在main,js入口文件中配置：
import Axios from 'axios';
Vue.prototype.$axios = Axios;
*通过挂载到VUE的原型对象上，在全局可以通过 this.$axios 的方式调用
axios的API
分享一篇axios的官方文档API攻略的帖子：《vue axios 全攻略》
axios的常用配置
- 请求的根路径：
axios.defaults.baseURL = 'https://api.example.com';
- 全局请求拦截器
// 添加全局请求拦截器
Axios.interceptors.request.use(
config => {
isLoading.start(); // 此处可以配置页面加载进度条的开启
config.headers.Authorization = window.sessionStorage.getItem('token'); // 记录返回的token值到sessionStorage
return config;
},
error => {
// 跳转error页面
router.push({ path: "/error" });
return Promise.reject(error);
}
);
- 全局响应拦截器
// 添加全局响应拦截器
Axios.interceptors.response.use(
res => {
isLoading.done(); //关闭加载动画
// 通过返回的状态码进行操作
if (res.data.code === "401") {
// 401表示没有登录
// 提示没有登录
Vue.prototype.notifyError(res.data.msg);
// 修改vuex的showLogin状态,显示登录组件
store.dispatch("setShowLogin", true);
}
if (res.data.code === "500") {
// 500表示服务器异常
// 跳转error页面
router.push({ path: "/error" });
}
return res;
},
error => {
// 跳转error页面
router.push({ path: "/error" });
return Promise.reject(error);
}
);
- 发送 get 请求
this.$axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- 发送 post 请求
this.$axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});