当前位置：首页 > article >正文

axios的认识与基本使用

article 2024/12/2 9:38:48

axios简介

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

主要特点

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为：
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF

安装

在 Node.js 项目中

如果你正在开发一个 Node.js 项目，可以使用 npm 或 yarn 来安装 axios：

npm install axios
# 或者
yarn add axios

在浏览器环境中

如果是在浏览器环境中使用，可以通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者通过模块打包工具（如 Webpack）进行安装并导入：

import axios from 'axios';

基本用法

发送 GET 请求

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Data:', response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

发送 POST 请求

axios.post('https://api.example.com/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => {
  console.log('User created:', response.data);
})
.catch(error => {
  console.error('Error creating user:', error);
});

配置选项

你可以为请求设置各种配置选项，例如 headers、timeout 等：

axios.get('https://api.example.com/data', {
  params: {
    key1: 'value1',
    key2: 'value2'
  },
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  timeout: 5000 // 设置超时时间
})
.then(response => {
  console.log('Data with config:', response.data);
})
.catch(error => {
  console.error('Error with config:', error);
});

响应配置

请求响包含信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

使用 then

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

其他

使用 catch，或者传递一个rejection callback作为 then 的第二个参数时，响应可以通过 error 对象被使用，正如在错误处理部分解释的那样。

拦截器

拦截器允许你在请求被发送之前或响应被处理之前执行一些操作。这对于全局错误处理、日志记录、认证等非常有用。

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  console.log('Request Interceptor:', config);
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权的情况
  }
  return Promise.reject(error);
});

取消请求

有时候你可能需要在请求完成前取消它，比如当用户导航离开页面时。axios 提供了取消请求的功能：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

全局配置

你还可以为所有请求设置默认配置项，或者创建一个自定义的实例来应用特定的配置：

// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';

// 创建一个自定义实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 3000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/data')
  .then(response => {
    console.log('Custom instance response:', response.data);
  })
  .catch(error => {
    console.error('Custom instance error:', error);
  });

错误处理

axios 的错误处理通常是通过 .catch() 方法来实现的。错误对象通常包含以下信息：

response: 包含服务器返回的所有信息。
request: 实际的 XMLHttpRequest 对象。
message: 错误消息。
config: 发起请求时的配置。

axios.get('https://api.example.com/bad-url')
  .then(response => {
    console.log('Success:', response);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.error('Server responded with an error:', error.response.status, error.response.data);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 在设置请求时发生了一些问题
      console.error('Error setting up request:', error.message);
    }
  });