SOURCE

一、Axios是什么？
Axios是一个基于Promise的http客户端，可用于浏览器和Node.js环境。它是对原生XHR的封装，提供了更简洁、强大的API
二、核心特点
✅ 基于Promise-支持async/await，避免回调地狱
✅ 同构应用-浏览器和 Node.js 通用
✅ 拦截器机制-可全局处理请求/响应
✅ 自动转换JSON-无需手动调用 .json()
✅ 请求取消-支持取消正在进行的请求
✅ 超时设置-可配置请求超时
✅ 进度监控-支持上传/下载进度
✅ XSRF防护-跨站请求伪造防护
✅ 错误处理-HTTP错误自动抛异常
二、为什么要用Axios，和XHR和Fecth的对比
//原生XHR方式，缺点：代码冗长，回调嵌套，需要手动处理 JSON
function xhrRequest() {
    const xhr = new XMLHttpRequest()
    xhr.open('GET','http://xxxx',true)
    xhr.setRequestHeader('Content-Type','application/json')

    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.statue === 200) {
            const data = JSON.parse(xhr.responseText) 
            console.log('成功返回数据：',data)
        }else {
            console.log('失败：',xhr.responseText)
        }
    }
    xhr.onerror = function() {
        console.error('请求失败')
    }
    xhr.send()

}

//Fetch方式(原生Promise)，缺点：需要手动检查response.ok，需要手动调用.json(),需要手动实现超时
async function fetchRequest() {
    try {
        const response = await fetch('url',{
            method:'post',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        if(!response.ok) {
            throw new Error(`网络请求失败${response.status}`)
        }
        const data = await response.json()
        console.log('成功返回数据：',data)

    }catch(error) {
        consoel.log('错误：',error)

    }
}
//Axios方式，优点：代码简洁，自动处理 JSON，错误处理自动化
import axios from 'axios'

async function axiosRequest() {
    try{
       const response = await axios.post('url',{
        headers: {
            'Content-Type': 'application/json'
        },
        data: {
              firstName: 'Finn',
    lastName: 'Williams'
        }
       })
       //自动解析json，直接使用response.data
        console.log('成功返回数据：',response.data)
        console.log('状态码：',response.status)
        console.log('响应头：',response.headers)

    }catch(error) {
        //http错误自动进入catch
        console.log('错误：',error)

    }

}
//axios不用async和await
axios.get('/api/user/123')
  .then(function (response) {
    // 请求成功，处理响应数据 response.data
    console.log(response.data);
  })
  .catch(function (error) {
    // 请求失败，处理错误
    console.error('出错啦！', error);
  });

//Axios高级配置
//(1)创建Axios实例（推荐方式）
const apiClient = axios.create({
    baseURL: 'https://xxxx',//基础URL
    timeout: 10000, //超时时间10s
    headers: {
        'Content-Type':'application/json'
    }

})

//使用axios实例发送请求
async function useInstance() {
    //请求会自动拼接baseURL
    const response = await apiClient.get('/user/123')
    consoel.log(response.data)
}

//(2)请求拦截器
apiClient.interceptors.request.use(
    config=>{
        //在发送请求之前做些什么
        //统一添加身份认证令牌
        const token = localStorage.getItem('token')
        if(token) {
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    error=>{
        //对请求错误做些什么
        return Promise.reject(error)
    }
)

//(3)响应拦截器
apiClient.interceptors.response.use(
    response =>{
        //对响应数据做点什么
        return response.data
    },
    error=>{
        //对响应错误做点什么
         if (error.response && error.response.status === 401) {
         // 跳转到登录页
         window.location.href = '/login';
         }
    return Promise.reject(error);
    }
)

axios是如何解决CSRF防护-跨站请求伪造防护
axios 通过自动读取 cookie 中的 XSRF token 并将其添加到请求头中来防护 XSRF 攻击
过程如下：
服务器：
   1.当用户登录成功后，服务器生成一个随机的 CSRF Token，
   2.并通过 Set-Cookie 响应头将其发送给浏览器

Axios会自动：
   1. 从 Cookie 中读取 XSRF-TOKEN 的值
   2. 将其添加到 X-XSRF-TOKEN 请求头中
   3. 一起发送给服务器

服务器：
   1. 从请求的 Cookie 中读取 XSRF-TOKEN 的值
   2. 从请求头 X-XSRF-TOKEN 中读取值
   3. 比对两个值是否一致