Axios基础使用的知识总结
Axios的概念：
Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中，他专注于网络请求。
引入：
在前端谈到网络请求那不得不浅谈一下ajax。
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax的优缺点
优点：
- 无刷新更新数据
- 异步与服务器通信
- 前端和后端负载平衡
- 基于标准被广泛支持
- 界面与应用分离
缺点：
- ajax不能使用Back和history功能，即对浏览器机制的破坏
- 安全问题 ajax暴露了与服务器交互的细节
- 对收索引擎的支持比较弱
- 破坏程序的异常处理机制
- 违背URL和资源定位的初衷
- ajax不能很好的支持移动设备
- 太多客户端代码造成开发上的成本
为什么选择axios
ajax的功能如此强大那为什么现在使用axios的比例在增加呢？原因就是在程序中使用封装的ajax需要引入jQuery整个库来进行操作不符合当今主流前端框架轻量化便捷的操作（尤其在vue中）所以vue这种主流前端框架选择采用axios替代ajax来进行网络请求。axios本质上也是对原生XHR的封装，只不过是Promise的实现版本。
Axios的特性
- 从浏览器中创建XMLHttpRequests
- node创建http请求
- 支持PromiseAPI
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动换成json
如何将Axios引入到项目中
在项目中用Axios的请求数据十分方便，首先要将axios安装到所要使用的项目中（这里以在Vue的项目中引入axios为例）
安装：在项目的命令窗口中输入以下命令
CommonJs:
npm install --save axios vue-axios
查看axios是否下载到项目中
打开package.json查看dependencies中是否存在的axios
引入axios
将以下代码加入入口文件中
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
如何使用Axios
1.发起GET请求
axios({
//请求方式
method:'GET',
//请求地址
url:'http://www.xxx.com',
//url中的查询参数(GET)
params:{
id:1
},
}).then(function(result){
console.log(result);
})
2.发起POST请求
<body>
<button id="btnPost">发起POST请求</button>
</body>
<script>
document.querySelector('#btnPost').addEventListener('click',async function(){
//如果调用某个方法返回值是Promise实例，则前面可以添加await
//await 只能用在被async "修饰"的方法中
const {data}=await axios({
method:'POST',
url:'请求地址',
data:{
name:'zs',
age:20
},
})
console.log(data);
})
3.axios的简便写法
axios.get 和axios.post
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
</body>
<script>
(axios.get的写法）
document.querySelector('#btnGET').addEventListener('click',async function(){
/* axios.get('url地址',{
//GET参数
params:{}
}) */
const {data:res} =await axios.get('请求地址',{
params:{id:1}
})
console.log(res);
})
(axios.post的写法)
document.querySelector('#btnPOST').addEventListener('click',async function(){
/*axios.post('url地址',//POST参数{})*/
const {data:res}=await axios.post('请求地址',{name:'zs',gender:'女'})
console.log(res);
})
</script>
4.在实际开发中我们更多把封装好的axios放到项目中
// 封装请求
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 请求
const http = axios.create({
baseURL: "请求地址",
timeout: 6000
})
// 请求拦截
http.interceptors.request.use(config => {
//请求头设置
let token = localStorage.getItem('token') || ''
config.headers.Authorization = token
return config
}, err => {
console.log(err);
})
// 响应拦截
http.interceptors.response.use(arr => {
// 对响应码的处理
switch (arr.data.meta.status) {
case 200:
ElMessage({
message: arr.data.meta.msg,
type: 'success',
})
break;
case 201:
ElMessage({
message: arr.data.meta.msg,
type: 'success',
})
break;
case 204:
ElMessage({
message: arr.data.meta.msg,
type: 'success',
})
break;
case 400:
ElMessage({
message: arr.data.meta.msg,
type: 'warning',
})
break;
case 401:
ElMessage({
message: arr.data.meta.msg,
type: 'warning',
})
break;
case 403:
ElMessage({
message: arr.data.meta.msg,
type: 'warning',
})
break;
case 404:
ElMessage({
message: arr.data.meta.msg,
type: 'warning',
})
break;
case 422:
ElMessage({
message: arr.data.meta.msg,
type: 'warning',
})
break;
case 500:
ElMessage({
message: arr.data.meta.msg,
type: 'error',
})
break;
}
return arr.data.data
}, err => {
console.log(err);
})
// 返出
export default http
\
