Axios介绍
1、Axios是什么？
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
2、Axios特性
（1）支持Promise API
（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
（4）取消请求
（5）自动转换JSON数据
（6）客户端支持防御XSRF
3、浏览器支持情况
Firefox、Chrome、Safari、Opera、Edge、IE8+。
Axios基本使用
yarn add axios
import axios from "axios" axios.get("/data.json").then(res=>{ console.log(res) }).catch(err=>{ console.log(err) })
打开控制台瞅两眼，已经有数据了
Axios常用请求方法
方法列举：get, post, put, patch, delete等。
- get：一般用户获取数据
- post：一般用于表单提交与文件上传
- patch：更新数据（只将修改的数据推送到后端）
- put：更新数据（所有数据推送到服务端）
- delete：删除数据
备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。
1、get方法
方式一
axios .get("/data.json", { params: { id: 12 } }) .then(res => { console.log(res); }) .catch(err => { console.log(err); });
方式二
axios({ method: "get", url: "/data.json", params:{ id:12 } }).then(res => { console.log(res); });
带有参数后get请求实际是http://xxxxx/data.json?id=12，写了这么多结果就是url加了参数。
浏览器控制台相关信息介绍：
- Request URL：请求URL
- Request Method：请求方式
2、post方法
post请求常用的数据请求格式有两种：
1.form-data（常用于表单提交（图片上传、文件上传））
let data = { id: 12 }; let formData = new FormData(); for(let key in data){ formData.append(key,data[key]) } console.log(formData) axios.post('/data.json',formData).then(res=>{ console.log(res,'formData') })
注意：请求地址Request URL: http://xxxxxxx/data.json，
请求头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12
2.application/json（常用）
方式一
let data = { id: 12 }; axios.post("/data.json", data).then(res=>{ console.log(res, 'post') });
方式二
let data = { id: 12 }; axios({ method:'post', url:'/data.json', data:data }).then(res=>{ console.log(res) })
注意：请求地址Request URL: http://xxxxxxxx/data.json，
请求头中Content-Type: application/json;charset=UTF-8
参数形式：{ id:12 }
3、put方法
let data = { id: 12 }; axios.put("/data.json", data).then(res=>{ console.log(res, 'put') });
4、patch方法
let data = { id: 12 }; axios.patch("/data.json", data).then(res=>{ console.log(res, 'patch') });
5、delete方法
方式一：params
axios .delete("/data.json", { params: { id: 12 } }) .then(res => { console.log(res, "delete"); }); let params = { id: 12 }; axios({ method:'delete', url:'/data.json', params:params }).then(res=>{ console.log(res) })
方式二：data
axios .delete("/data.json", { data: { id: 12 } }) .then(res => { console.log(res, "delete"); }); let data = { id: 12 }; axios({ method:'delete', url:'/data.json', data:data }).then(res=>{ console.log(res) })
注意：params方式会将请求参数拼接在URL上面，Request URL: http://xxxxxxxx/data.json?id=12
参数形式：id:12
Content-Type: text/html; charset=utf-8
data方式不会讲参数拼接，是直接放置在请求体中的，Request URL: http://xxxxxxxx/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8
总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；
