hexo搭建及部署

一、axios基础使用

1.1 介绍

• 官网：axios
• 概念：基于 promise 网络请求库
• 特性
  • 支持 Promise API
  • 拦截请求和响应
  • 取消请求
  • 超时处理

1.2 基本使用介绍

• 安装

npm install axios
CDN：
jsDelivr <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
unpkg    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 使用方式
  • 默认实例（axios.get/post直接使用 - 不推荐）
  • 自定义实例（axios.create）

1.3 默认实例方式（不推荐使用）

• 适用场景：临时单次请求（每次请求都要重复写相同的配置）
  • 传参方式
    • GET请求（axios.get(url[, config])）
      • 第一个参数：URL
      • 第二个对象：配置对象（含查询参数params）
    • POST请求（axios.post(url[, data[, config]]) ）
      • 第一个参数：URL
      • 第二个参数：请求体数据
      • 第三个参数：配置对象
• • 使用示例

// 1.默认实例
// get请求
import axios from 'axios';
const token = localStorage.getItem('token')
axios.get('/api/api/user/userInfo', { 
  params: { id: '123' },
  headers: {
    Authorization: `Bearer ${token}`
  }
}).then((res) => {
  console.log(res)
}).catch((error) => {
  console.log(error)
}).finally(() => {
  console.log('请求结束')
})
// post请求
const getUserList = async() => {
  try {
    const res = await axios.post('/api/api/user/userList', 
      { current: 1, pageSize: 10 },
      {
        headers: {
          Authorization: `Bearer ${token}`
        }
      }
    )
    console.log(res)
  } catch(error){
    console.log(error)
  } finally {
    console.log('请求结束')
  }
}
getUserList();

1.4 自定义实例方式

• 适用场景：中大型项目，需要统一配置（如baseURL、超时、拦截器）
• 使用方式：
  • 别名方式：service.get/service.post（和默认实例方式基本保持一致）
  • 通用方法：service(config)
• 使用示例：

import axios from axios;
const service = axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  baseURL: import.meta.env.VITE_BASE_URL || '/', // 替换为你的 API 基础 URL
  timeout: 1000,
  headers: {
    'X-Pc-Name': 'AntPc'
  },
});

service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    Promise.reject(error);
  }
)

service.interceptors.response.use(
  response => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
)

const getUserInfoFun = () => {
  return service({
    method: 'get',
    url: '/api/user/userInfo',
    params: { id: '123' }
  })
}

const getUserListFun = (data) => {
  return service({
    method: 'post',
    url: '/api/user/userList',
    data
  })
}

Promise.all([getUserInfoFun(), getUserListFun({ current: 1, pageSize: 10 })]).then(([info, list]) => {
  // 所有Promise成功时执行
  console.log(info, list)
}).catch(error => {
  // 任意一个Promise失败时执行
  console.error("捕获到错误：", error);
}).finally(() => {
  // 无论成功失败都会执行
  console.log("所有请求已完成");
})

1.5 取消请求

import axios from axios;
const service = axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  baseURL: import.meta.env.VITE_BASE_URL || '/', // 替换为你的 API 基础 URL
  timeout: 1000,
  headers: {
    'X-Pc-Name': 'AntPc'
  },
});

service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    Promise.reject(error);
  }
)

service.interceptors.response.use(
  response => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
)
// 取消相关控制
let controller = null;
const getUserInfoFun = () => {
  return service({
    method: 'get',
    url: '/api/user/userInfo',
    params: { id: '123' },
    signal: controller.signal,
  })
}
const startAxios = () => {
  // 取消之前的请求（如果存在）
  if (controller) {
    controller.abort();
  }
  controller = new AbortController();
  getUserInfoFun();
}
const cancelAxios = () => {
  controller && controller.abort();
}

1.6 重点注意事项

• baseURL：公共前缀，简化相对路径请求
  • 相对路径和绝对路径选择
    • 自有服务：相对路径
    • 外部服务：绝对路径（绝对路径 url 会覆盖 baseURL）
  • 好处：运维只需调整Nginx配置，无需重新打包前端代码