axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
目录
axios 的理解和应用
axios 特点：
使用 axios 发 ajax请求
1. 发送 GET 请求
axios get完整版：
axios get精简版：
axios get请求发送时携带query参数：
axios get携带 query参数完整版：
axios get携带 query参数精简版：
发送 POST 请求:
axios post完整版：
axios post精简版：
发送 PUT 请求:
axios put完整版：
axios put精简版：
发送 DELETE 请求：
axios DELETE 代码：
axios 常用配置：
axios 可以全局配置：
axios.create(config)配置一个新的axios
axios 的理解和应用
axios 是什么？
前端最流行的 ajax 的请求库
React/Vue 官方都推荐使用 axios 发 ajax 请求
文档：http://github.com/axios/axios
axios 特点：
- 基本 promise 的异步 ajax 请求库
- 浏览器 / node 端都可以使用
- 支持请求 / 响应拦截器
- 支持请求取消
- 请求 / 响应数据转换
- 批量发送多个请求
使用 axios 发 ajax请求
- axios 调用的返回值是 promise 实例
- 成功的值叫 response ，失败的值叫 error
- axios 成功的值是一个 axios 封装的 response 对象，服务器返回的真正数据在 response.data 中
1. 发送 GET 请求
axios get完整版：
const result = axios({
url: 'http://localhost:5000/persons',//请求地址
method: 'GET',//请求方式
});
result.then(
response => {console.log('请求成功了！', response.data);},
error => {console.log('请求失败了，', error);}
);
axios get精简版：
axios.get('http://localhost:5000/persons').then(
response => { console.log('请求成功了！', response.data); },
error => { console.log('请求失败了，', error); }
);
axios get请求发送时携带query参数：
axios get携带 query参数完整版：
axios({
url:'http://localhost:5000/person',
method:'GET',
params:{id:personId.value}//此处写的params但其实传的是query参数
}).then(
response =>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
axios get携带 query参数精简版：
axios.get('http://localhost:5000/person',{params:{id:personId.value}},).then(
response =>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
发送 POST 请求:
axios post完整版：
axios({
url:'http://localhost:5000/person',
method:'POST',
// data:{name:personName.value,age:personAge.value},//携带请求体参数(默认json编码)
data:`name=${personName.value}&age=${personAge.value}`,//携带请求体参数(urlencoded编码)
}).then(
response =>{console.log('成功了'+response.data);},
error =>{console.log('失败了'+error);}
)
axios post精简版：
//使用对象就会默认是json编码模式
//axios.post('http://localhost:5000/person',{name:personName.value,age:personAge.value}).then(
//是用字符串就会默认是urlencoded编码模式
axios.post('http://localhost:5000/person',`name=${personName.value}&age=${personAge.value}`).then(
response =>{console.log('成功了'+response.data);},
error =>{console.log('失败了'+error);}
)
备注：axios 底层源码中也是写入一个判断，假如第二个空中为对象则使用 JSON.stringify 来解码，假如第二个空为模板字符串则使用urlencoded方式来解码。
发送 PUT 请求:
axios put完整版：
//完整版
axios({
url: 'http://localhost:5000/person',
method: 'PUT',
data:{
id:personUpdateId.value,
name:personUpdateName.value,
age:personAge.value
}
}).then(
response => { console.log('成功了' + response.data); },
error => { console.log('失败了' + error); }
)
axios put精简版：
//精简版
axios.put("http://localhost:5000/person",{
id:personUpdateId.value,
name:personUpdateName.value,
age:personAge.value,
}).then(
response => { console.log('成功了' + response.data); },
error => { console.log('失败了' + error); }
)
发送 DELETE 请求：
axios DELETE 代码：
//使用的params参数的方式
axios({
url:`http://localhost:5000/person/${personDeleteId.value}`,
method:'DELETE',
}).then(
response =>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
axios 常用配置：
axios({
url:"http://localhost:5000/test1",//请求地址
method:'GET',//请求方式
params:{delay:3000,b:2},//配置query参数
data:{c:3,d:4},//配置请求体参数（json编码）
data:`e=5&f=6`,//配置请求体参数（urlencoded编码）
timeout:2000,//配置超市时间
Headers:{demo:123},//配置请求头
responseType: 'json'//配置响应数据的格式(默认是json)
})
axios 可以全局配置：
//给axios配置默认属性
axios.defaults.timeout= 2000;//配置了默认超时时间
axios.defaults.headers={school:'金科'};//配置每个请求的请求头都自带的内容
axios.defaults.baseURL='http://localhost:5000';
//配置请求的地址，若不配置，则axios默认从自身的地址发送请求；若配置了，写请求时不需要带以上写过的地址，只需要写后面的地址会自动拼接！
axios.create(config)配置一个新的axios
- 根据指定配置创建一个新的 axios ,也就是每个新 axios 都自己的配置
- 新的 axios 只是没有取消请求和批量发请求的方法，其他所有的语法都是一致的，所以不是100%一样
- 为什么要这个语法？
需要：项目中有部分接口需要的配置与另一部分接口需要的配置不一样
备注：axios.create( ) 配置 需要写在 axios 全局配置的前面，否则会报错（目前版本0.27.2）之前某个版本可用