【前端知识】前端组件-axios详细介绍

Axios详细介绍

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了简单易用的 API，可以在浏览器和 Node.js 环境中发送 HTTP 请求，并处理响应。Axios 支持请求和响应的拦截器、自动转换 JSON 数据、取消请求、客户端支持保护免受 XSRF 攻击等功能。

安装

在 Node.js 环境中，你可以使用 npm 或 yarn 来安装 Axios：

npminstall axios
# 或者yarnadd axios

在浏览器中，你可以通过 CDN 引入 Axios：

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

基本使用

以下是一个使用 Axios 发送 GET 请求的示例：

// 引入 Axiosconst axios =require('axios');// 发送 GET 请求到指定的 URL
axios.get('https://api.example.com/data').then(response=>{// 请求成功时，response 对象包含服务器返回的数据
    console.log(response.data);}).catch(error=>{// 请求失败时，error 对象包含错误信息
    console.error('Error fetching data:', error);});

发送 POST 请求

以下是一个使用 Axios 发送 POST 请求的示例，同时发送一些数据到服务器：

// 引入 Axiosconst axios =require('axios');// 定义要发送的数据const postData ={
  key1:'value1',
  key2:'value2'};// 发送 POST 请求到指定的 URL，并携带数据
axios.post('https://api.example.com/submit', postData).then(response=>{// 请求成功时，处理服务器返回的数据
    console.log('Data submitted successfully:', response.data);}).catch(error=>{// 请求失败时，处理错误信息
    console.error('Error submitting data:', error);});

使用请求配置

你可以通过配置对象来定制请求，例如设置请求头、查询参数等：

// 引入 Axiosconst axios =require('axios');// 定义请求配置const config ={
  method:'get',// 请求方法
  url:'https://api.example.com/search',// 请求 URL
  params:{// 查询参数
    q:'search query'},
  headers:{// 请求头'Authorization':'Bearer YOUR_ACCESS_TOKEN'}};// 发送请求axios(config).then(response=>{// 请求成功时，处理服务器返回的数据
    console.log('Search results:', response.data);}).catch(error=>{// 请求失败时，处理错误信息
    console.error('Error fetching search results:', error);});

拦截器

拦截器允许你在请求或响应被处理之前拦截它们。你可以添加请求拦截器来在发送请求之前做一些事情，比如添加认证令牌。你也可以添加响应拦截器来处理响应数据或错误。

// 引入 Axiosconst axios =require('axios');// 添加请求拦截器
axios.interceptors.request.use(config=>{// 在发送请求之前做些什么，比如添加认证令牌const token ='YOUR_ACCESS_TOKEN';if(token){
    config.headers['Authorization']=`Bearer ${token}`;}return config;},error=>{// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(response=>{// 对响应数据做些什么return response;},error=>{// 对响应错误做些什么，比如统一处理错误格式if(error.response.status ===401){// 处理未授权错误
    console.error('Unauthorized, redirecting to login');}return Promise.reject(error);});// 发送请求
axios.get('https://api.example.com/protected').then(response=>{
    console.log('Protected data:', response.data);}).catch(error=>{
    console.error('Error fetching protected data:', error);});

取消请求

你可以使用 CancelToken 来取消请求：

// 引入 Axios 和 CancelTokenconst axios =require('axios');const CancelToken = axios.CancelToken;let cancel;// 发送请求，并设置取消令牌
axios.get('https://api.example.com/long-request',{
  cancelToken:newCancelToken(functionexecutor(c){// 保存取消函数
    cancel = c;})}).then(response=>{
  console.log('Data received:', response.data);}).catch(thrown=>{if(axios.isCancel(thrown)){
    console.log('Request canceled', thrown.message);}else{// 处理错误}});// 取消请求（消息参数是可选的）cancel('Operation canceled by the user.');

以上就是对 Axios 的详细介绍和一些具体的使用样例。通过这些示例，你可以看到 Axios 是如何简化 HTTP 请求的发送和处理的。