<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h3>axios</h3>
<script>
// GET请求
// axios.get('/user?username=ksc')
// .then(()=>{
// console.log("成功执行");
// })
// .catch(()=>{
// console.log("失败执行");
// })
// .then(()=>{
// console.log("都执行");
// })
// .finally(()=>{
// console.log("finally");
// })
// axios.get('/user',{
// params:{
// username:'ksc11'
// }
// }).catch(()=>{
// console.log("失败了");
// })
// // POST请求
// function post1(){
// axios.post('/user',{
// username:'kscpost'
// }).then(()=>{
// console.log("成功1");
// }).catch(()=>{
// console.log("失败了1");
// })
// }
// function post2(){
// axios.post('/user1',{
// username:'kscpost1'
// }).then(()=>{
// console.log("成功2");
// }).catch(()=>{
// console.log("失败了2");
// })
// }
// // 多个请求并发
// Promise.all([post1(),post2()]).then((result)=>{
// console.log("第一个请求的成功结果",result[0]);
// console.log("第二个请求的成功结果",result[1]);
// },eor=>{
// console.log("eor",eor);
// }).catch((error)=>{
// console.log("失败了3",error);
// })
// 可以向axios传入一个配置来发送请求
// axios({
// method:'post',
// url:'/user',
// data:{
// id:1,
// name:'ksc'
// }
// })
// 创建一个axios实例
const instance=axios.create({
// 创建的一些配置
url:'/user',//是必须的，表示请求的服务器的url
method:"get",//请求的方式，默认是get
baseURL:'http://kyzh/xxx/yyy/zzz',//baseURL会自动拼接在url前面，除非url是一个绝对的url，设置他可以方便后期发送请求是写重复的url部分
// transformRequest:允许在向服务器发送请求之前，处理或修改数据
// 数组最后一个必须返回一个字符串、 一个Buffer实例，ArrayBuffer，FormData，或 Stream
// 只能用于PUT/POST/PATCH方法
transformRequest:[function(data,header){
// data是你要发送数据
// header是发送的请求头
},(data,header)=>{
return data
//transformRequest是一个函数数组，他会依次执行数组中的函数，在最后一个函数执行完成后，你需要手动return出去data
},...],
// transformResponse：可以处理返回的数据，在then和catch之前
transformResponse:[(data)=>{
// data返回的数据
return data
}],
// params是和请求一起发送的url参数
params:{
},
// 只有post可以
data:'',
// 请求时间，如果超过就会断开
timeout:5000,
// responseType表示浏览器将要响应的数据格式
responseType:'json(默认)',
// 表示响应的编码（node.js）
responseEncoding:'utf-8',
// 自定义请求头
headers:{//设置请求的表头信息,
// 说明
// Content-Type：表示以什么样的格式传数据给后端
// 常见的格式有3种：
// 1)application/json:请求体中的数据会以JSON字符串的方式传给后端（这个是axios默认的请求数据格式）
// 2)application/x-www-form-urlencoded:请求体的数据会会以表单形式（键值对）传过去
// application/x-www-form-urlencoded配置方式:
// a)用URLSearchParams 传数据
// let params=new URLSearchParams()
// params.append("id",45757)
// params.append('name','ksc')
// axios({
// method:'post',
// url:'/uesr',
// data:params
// }).then(()=>{})
// b)借助QS
// import QS from qs (这个是axios自带的)
// let params={
// id:'777',
// name:'ksc'
// }
// axios({
// method:'post',
// url:'/uesr',
// Content-Type:'application/x-www-form-urlencoded'
// data:QS.stringify(params)
// })
// 3)multipart/form-data:可以将请求体中的数据处理为一条消息，以标签为单元，用分隔符隔开，既可以上传键值对，也可以上传文件(这个一般在提交带表单（有文件的）的情况下使用)
// 上传表单
// let formdata=new FormData() (这个不仅可以用在multipart/form-data,也可以用在application/x-www-form-encoded)
// formdata.append('name','ksc')//文件也是可以传的，它会转为一个二进制数据
// axios({
// methos:'post',
// url:'/uer',
// Content-Type:'multipart/form-data',
// data:formdata
// })
// u
}
})
// 配置的优先级:
// 请求传入的config>实例的default>在lib/default.js中找到的配置：它会按照合拼配置，相同的按照这个顺序优先级
// axios的拦截器
// 前面有一个transformrequest和 transformResponse,可以在发送前和返回数据前（then、catch前）修改、处理数据
// 但是这两个配置项只能用于部分请求方式，所以需要一个通用的方法来处理数据（在请求前和响应前）
// 请求拦截器
axios.interceptors.request.use(function (config){
// 在发送前处理数据
// 例如添加token
config.headers.Authorization='token'
return config
},function(error){
return Promise.reject(error)//请求出现错误，抛出
})
// 响应拦截器
axios.interceptors.response.use(function (res){
// 2xx就是成功，就会触发这个函数
// 获取返回的数据
const res=res.data
// status请求的状态吗
服务器异常
if(res.status==500){
return Promise.reject(res.msg)
}
// 等等
return res
},function(error){
// 超过2xx范围都会触发这个错误处理函数
return Promise.reject(error)
})
// 也可以为axios实例添加拦截器
const instanse=axios.create()
instanse.interceptors.request.use(function(){})
</script>
</body>
</html>
