axios使用

Axios 是一个基于 Promise 的 HTTP 请求库，它允许在浏览器和 Node.js 环境中进行 HTTP 请求。以下是使用 Axios 发送 HTTP 请求的基本步骤：

  1. 安装 Axios

使用 npm 或 yarn 安装 Axios：

npm install axios
  1. 导入 Axios

在需要使用 Axios 的 JavaScript 文件中，导入 Axios：

import axios from 'axios'
  1. 发送请求

使用 Axios 发送不同类型的 HTTP 请求，如 GET、POST、PUT 等。例如，发送一个 GET 请求：

axios.get('/user')
  .then(response => {
    console.log(response.data)；
  })
  .catch(error => {
    console.error(error)；
  })；
  1. 配置请求

可以设置请求的 baseURL、请求头、请求参数、超时时间等。例如，创建一个带有自定义 baseURL 和请求头的 Axios 实例：

const service = axios.create({
  baseURL: 'http://localhost:8080/api/',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
})；
  1. 拦截请求和响应

使用拦截器在请求发送前或响应接收前进行预处理。例如，添加请求拦截器：

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config；
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)；
})；
  1. 取消请求

Axios 支持取消尚未完成的请求。例如，使用 CancelToken：

const source = axios.CancelToken.source()；
axios.get('/user', { cancelToken: source.token })
  .then(response => {
    console.log(response.data)；
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message)；
    } else {
      console.error(error)；
    }
  })；

// 取消请求
source.cancel('Operation canceled by the user.')；
  1. 自动转换 JSON 数据

Axios 会自动将响应数据转换为 JSON 格式。

  1. 客户端防御 XSRF

Axios 支持客户端防御 XSRF(跨站请求伪造)。

以上是使用 Axios 发送 HTTP 请求的基本流程。您可以根据需要调整配置和请求方法。

Top
×
×