axios详解

猫老板的豆2024-03-31 14:48

文章目录

  • axios简介
  • axios特性
    • [1. 基于 Promise](#1. 基于 Promise)
    • [2. 浏览器和 Node.js 都支持](#2. 浏览器和 Node.js 都支持)
    • [3. 拦截请求和响应（axios鉴权）](#3. 拦截请求和响应（axios鉴权）)
    • [4. 自动转换 JSON 数据](#4. 自动转换 JSON 数据)
    • [5. 转换请求和响应数据](#5. 转换请求和响应数据)
    • [6. 取消请求](#6. 取消请求)
    • [7. 广泛的配置选项](#7. 广泛的配置选项)
    • [8. 客户端支持防止 CSRF/XSRF](#8. 客户端支持防止 CSRF/XSRF)
    • [9. 支持 HTTP 授权](#9. 支持 HTTP 授权)
    • [10. 良好的错误处理](#10. 良好的错误处理)
  • axios使用
  • axios封装
  • ajax与axios的区别

axios简介

Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。

axios特性

1. 基于 Promise

axios 的所有请求都返回一个 Promise 对象 ，这使得异步操作的处理更加直观和简洁。你可以使用 .then() 和 .catch() 方法来处理请求成功和失败的情况，或者使用 async/await 语法来编写更加清晰和易读的异步代码。

js 复制代码 
axios.post('https://api.example.com/submit', {  
    key1: 'value1',  
    key2: 'value2'  
  })  
  .then(function (response) {  
    console.log(response.data);  
  })  
  .catch(function (error) {  
    console.log(error);  
  });

.

2. 浏览器和 Node.js 都支持

axios 可以在浏览器环境中使用，也可以在 Node.js 中使用，这使得它在跨平台开发方面非常灵活。无论是在前端发送 API 请求，还是在后端与其他服务通信，axios 都能提供一致的体验。

axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios

.

3. 拦截请求和响应（axios鉴权）

axios 允许你在请求发送到服务器之前或响应返回客户端之前拦截它们。这使得你可以轻松地在请求中添加通用的头信息、身份验证令牌，或者在响应到达之前进行一些预处理。

  • 拦截请求

    js 复制代码 
    // 添加请求拦截器  
axios.interceptors.request.use(function (config) {  
    // 在发送请求之前做些什么  
    // 例如，添加请求头  
    if (localStorage.getItem('token')) {  
        config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;  
    }  
    return config;  
}, function (error) {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
});

    在这个例子中，我们检查本地存储中是否存在一个 token，如果存在，我们将其添加到请求的 Authorization 头中。

  • 拦截响应

    js 复制代码 
    // 添加响应拦截器  
axios.interceptors.response.use(function (response) {  
    // 对响应数据做点什么  
    // 例如，根据状态码判断请求是否成功  
    if (response.status === 200) {  
        return response;  
    } else {  
        return Promise.reject(response);  
    }  
}, function (error) {  
    // 对响应错误做点什么  
    if (error.response.status === 401) {  
        // 未授权，跳转到登录页面或执行其他操作  
        window.location.href = '/login';  
        return;  
    }  
    return Promise.reject(error);  
});

    在这个例子中，我们检查响应的状态码。如果状态码是 200，我们返回响应；否则，我们拒绝这个 Promise。如果状态码是 401（未授权），我们重定向用户到登录页面。

  • 移除拦截器

    js 复制代码 
    const myRequestInterceptor = axios.interceptors.request.use(function (config) {  
    // ...  
});  
  
// 当你想移除拦截器时  
axios.interceptors.request.eject(myRequestInterceptor);

.

4. 自动转换 JSON 数据

axios 会自动将 JavaScript 对象序列化为 JSON 格式作为请求体，并自动将服务器返回的 JSON 数据解析为 JavaScript 对象。这使得处理 JSON 数据变得更加简单。

.

5. 转换请求和响应数据

你可以在请求发送到服务器之前和响应返回客户端之后，对请求和响应数据进行转换。例如，你可以自动将 JSON 数据转换为 JavaScript 对象，或者将响应数据转换为特定格式。

利用 transformRequest 和 transformResponse 提供的灵活的机制，允许根据具体需求对请求和响应数据进行自定义转换：

js 复制代码 
axios({  
  url: 'https://api.example.com/data',  
  method: 'post',  
  data: {  
    key1: 'value1',  
    key2: 'value2'  
  },  
  transformRequest: [function (data) {  
    // 在这里对请求数据进行转换  
    // 例如，你可能想要序列化数据为 JSON 字符串  
    return JSON.stringify(data);  
  }],  
  transformResponse: [function (data) {  
    // 在这里对响应数据进行转换  
    // 例如，你可能想要解析 JSON 字符串为 JavaScript 对象  
    return JSON.parse(data);  
  }]  
  headers: {  
    'Content-Type': 'application/json'  
  }  
})  
.then(function (response) {  
  console.log(response.data);  
})  
.catch(function (error) {  
  console.log(error);  
});

.

6. 取消请求

使用 axios 的 CancelToken，你可以方便地取消一个正在进行的请求。这在用户触发了一个新操作而前一个请求还未完成时非常有用，可以避免不必要的资源消耗。

js 复制代码 
let source = axios.CancelToken.source();  
  
axios.get('/user/12345', {  
  cancelToken: source.token  
}).catch(function (thrown) { 
  if (axios.isCancel(thrown)) { 
    console.log('Request canceled', thrown.message);  
  } else {  
    // 处理错误  
  }  
});  
  
// 取消请求 (请求原因可选)  
source.cancel('主动取消请求');

在上面的代码中，我们创建了一个 CancelToken 的源，并使用了它的 token 来发起一个 GET 请求。如果之后我们需要取消这个请求，我们可以调用 source.cancel() 方法，并传递一个可选的字符串作为取消的原因。当请求被取消时，catch 块会捕获到错误，并且你可以使用 axios.isCancel() 方法来检查这个错误是否是因为请求被取消。

.

7. 广泛的配置选项

axios 的配置选项非常丰富，它们允许你自定义请求的行为。以下是一些常用的配置选项及其描述：

  • url：请求的地址，是必需的。

  • method：请求方法，如 'get'、'post'、'put'、'delete' 等。默认是 'get'。

  • baseURL：将自动加在 url 前面，除非 url 是一个绝对 URL。它便于为 axios 实例的方法传递相对 URL。

  • headers：自定义请求头。

  • params：即将与请求一起发送的 URL 参数。必须是一个纯对象或 URLSearchParams 对象。

  • data：作为请求主体被发送的数据。只适用于 'PUT'、'POST' 和 'PATCH' 方法。当发送数据时，应该设置 Content-Type。

  • timeout：请求超时的毫秒数。如果请求花费的时间超过这个时间，请求将会被中断。

  • withCredentials：表示跨域请求时是否携带凭证（cookies, HTTP认证及客户端SSL证明等）。默认为 false。

  • responseType：服务器响应的数据类型，可以是 'arraybuffer'、'blob'、'document'、'json'、'text'、'stream'。

  • transformRequest：允许你在请求数据发送到服务器之前对其进行修改。它只能用于 'PUT'、'POST' 和 'PATCH' 这几个请求方法。数组中最后一个函数必须返回一个字符串、Buffer 实例、ArrayBuffer、FormData 或 Stream。

  • transformResponse：在响应数据传递到 then/catch 方法之前对其进行修改。

  • cancelToken：指定用于取消请求的 cancel token。

  • xsrfCookieName：用作 xsrf token 的值的 cookie 的名称。

  • xsrfHeaderName：携带 xsrf token 的值的 HTTP 头的名称。

  • onUploadProgress：处理上传进度的函数。

  • onDownloadProgress：处理下载进度的函数。

  • auth：表示应该使用 HTTP 基础认证，并提供用户名和密码。这将以 Authorization 头的形式发送。

  • validateStatus：定义对于给定的 HTTP 响应状态码是 resolve 还是 reject promise。

  • maxContentLength：定义允许的响应内容的最大字节。

  • httpAgent 和 httpsAgent：分别用于定义在 http 和 https 上用到的自定义代理。例如，在 node.js 环境中可以通过这些选项来设置 keepAlive。

对于重复使用的配置，建议设置为 axios 实例的默认配置，以减少代码冗余和提高可维护性:

js 复制代码 
axios.defaults.baseURL = 'https://api.example.com';  
axios.defaults.timeout = 1000;  
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

也可以在每次发起请求时单独指定，覆盖默认配置：

js 复制代码 
axios({  
  method: 'get',  
  url: '/user/12345',  
  timeout: 5000, // 覆盖默认超时设置  
  headers: { 'X-Custom-Header': 'foobar' } // 自定义请求头  
})  
.then(function (response) {})  
.catch(function (error) {});

.

8. 客户端支持防止 CSRF/XSRF

axios 默认会保护你的应用免受跨站请求伪造（CSRF）的攻击。它会检查服务器返回的响应头中的 XSRF-TOKEN，并自动将其添加到后续的请求头中。

以下是如何在客户端配置 axios 来支持防止 CSRF/XSRF 的步骤：

  1. 服务器端设置 CSRF token ：

    服务器需要在用户登录后设置一个包含 CSRF token 的 cookie。这个 cookie 通常命名为 XSRF-TOKEN 或其他自定义名称。
    Cookie xsrfTokenCookie = new Cookie("XSRF-TOKEN", csrfToken);

  2. 客户端读取 CSRF token ：

    在发送请求之前，客户端需要从 cookie 中读取 CSRF token。这通常通过 JavaScript 的 document.cookie 实现。

  3. 配置 axios 自动发送 CSRF token ：

    配置 axios 的 xsrfCookieName 和 xsrfHeaderName 选项，让 axios 自动从名为 XSRF-TOKEN 的 cookie 中读取 token，并将其添加到请求头 X-XSRF-TOKEN 中。下面是一个配置 axios 的示例：

    js 复制代码 
    // 引入 axios  
import axios from 'axios';  
  
// 配置 axios 实例  
const instance = axios.create({  
  // 其他配置...  
  xsrfCookieName: 'XSRF-TOKEN', // 默认就是 'XSRF-TOKEN'  
  xsrfHeaderName: 'X-XSRF-TOKEN' // 默认就是 'X-XSRF-TOKEN'  
});  
  
// 现在，当你使用 instance 发送请求时，axios 会自动从名为 'XSRF-TOKEN' 的 cookie 中  
// 读取 CSRF token，并将其添加到请求头 'X-XSRF-TOKEN' 中。  
instance.get('/some-endpoint')  
  .then(response => { })  
  .catch(error => { });

.

9. 支持 HTTP 授权

HTTP 授权头（通常指的是 Authorization 头）在 Axios 或其他 HTTP 客户端库中的主要作用是验证用户身份和授权访问资源 。这是确保只有经过身份验证和授权的用户才能访问受保护的资源的机制。

具体来说，Authorization 头通常包含访问令牌或密钥等凭证，这些凭证用于向服务器证明请求者的身份和权限。通过这种方式，服务器可以决定是否允许该请求者访问特定的资源或执行特定的操作。

HTTP 授权通常使用 Basic 或 Bearer 类型的授权。以下是两种类型的示例：

  • Basic 授权:

    Basic 授权通常用于发送用户名和密码，它们被编码为 Base64 格式。

    js 复制代码 
    const axios = require('axios');  
const Base64 = require('js-base64').Base64;  
  
const username = 'your_username';  
const password = 'your_password';  
const credentials = `${username}:${password}`;  
const encodedCredentials = Base64.encode(credentials);  
  
axios({  
  method: 'get',  
  url: 'https://example.com/api/resource',  
  headers: {  
    'Authorization': `Basic ${encodedCredentials}`  
  }  
})  
.then(response => {  
  console.log(response.data);  
})  
.catch(error => {  
  console.error(error);  
});

  • Bearer 授权

    Bearer 授权通常用于发送一个令牌（token），比如 JWT（JSON Web Tokens）。

    js 复制代码 
    const axios = require('axios');  
  
const token = 'your_bearer_token';  
  
axios({  
  method: 'get',  
  url: 'https://example.com/api/resource',  
  headers: {  
    'Authorization': `Bearer ${token}`  
  }  
})  
.then(response => {  
  console.log(response.data);  
})  
.catch(error => {  
  console.error(error);  
});

使用 Axios 拦截器设置默认授权头

通过使用 Axios 的拦截器功能，你可以为所有的请求自动添加 Authorization 头，从而避免了在每个请求中重复设置这个头的繁琐工作。这使得代码更加简洁和可维护。

js 复制代码 
const axios = require('axios');  
  
const token = 'your_bearer_token'; // 或者 Basic 编码后的凭证  
  
// 添加请求拦截器  
axios.interceptors.request.use(config => {  
  // 在发送请求之前做些什么  
  if (token) {  
    // 确保每个请求都有Authorization头  
    config.headers.Authorization = `Bearer ${token}`; // 或者 `Basic ${encodedCredentials}`  
  }  
  return config;  
}, error => {  
  // 对请求错误做些什么  
  return Promise.reject(error);  
});  
  
// 现在你可以正常发起请求，而不必在每个请求中都设置 Authorization 头  
axios.get('https://example.com/api/resource')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });

.

10. 良好的错误处理

Axios 的错误处理机制相当灵活和强大，允许开发者根据需要对不同类型的错误进行定制化的处理。以下是 Axios 错误处理的主要方式和特点：

  • 响应拦截器：Axios 允许你设置响应拦截器，在响应被 then 或 catch 处理前对其进行拦截。这样，你可以在拦截器中统一处理各种错误状态码，比如 400（请求参数错误）、401（身份验证失败）、409（资源不存在）、500（服务器内部错误）等。在拦截器中，你可以根据响应的状态码进行不同的处理，比如弹出警告、重定向到登录页面等。
  • 错误对象：当 Axios 请求发生错误时，它会返回一个错误对象。这个对象包含了有关错误的详细信息，比如请求的配置、响应数据（如果有的话）、请求状态等。你可以通过检查这个错误对象来获取更多关于错误的信息，并进行相应的处理。
  • 全局错误处理：除了在每个请求中单独处理错误外，你还可以设置全局的错误处理函数。这样，无论哪个请求发生错误，都会调用这个全局处理函数。这对于需要统一处理所有错误的情况非常有用，比如显示统一的错误提示信息或记录错误日志。
  • 取消请求：Axios 还支持取消请求的功能。当你需要取消一个正在进行的请求时，可以调用该请求的取消函数。取消请求会导致响应的 Promise 状态变为 rejected，从而触发错误处理机制。你可以在拦截器中处理取消请求的情况，比如清理相关资源或显示取消提示。

axios使用

安装axios

  • 使用npm：npm install axios
  • 使用yarn：yarn add axios
  • 使用bower：bower install axios
  • 使用cdn：在HTML文件中直接引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入axios

在JavaScript文件中，使用 import axios from './axios.js'; ;来导入axios。

发起请求

axios提供了多种请求方法，如get、post、put、delete等。下面以get请求为例：

js 复制代码 
axios.get('https://api.example.com/data')  
  .then(function (response) {  
    // 处理响应数据  
    console.log(response.data);  
  })  
  .catch(function (error) {  
    // 处理错误  
    console.log(error);  
  });

你也可以通过配置对象来发起请求，例如：

js 复制代码 
axios({  
  method: 'get',  
  url: 'https://api.example.com/data',  
  params: {  
    ID: 123  
  }  
})  
.then(function (response) {  
  console.log(response.data);  
})  
.catch(function (error) {  
  console.log(error);  
});

对于post、put等需要发送数据的请求，你可以在配置对象中提供data字段：

js 复制代码 
axios({  
  method: 'post',  
  url: 'https://api.example.com/data',  
  data: {  
    key1: 'value1',  
    key2: 'value2'  
  }  
})  
.then(function (response) {  
  console.log(response.data);  
})  
.catch(function (error) {  
  console.log(error);  
});

axios封装

vue中对axios的封装

ajax与axios的区别

简单通俗来讲ajax与axios的区别

相关推荐
阿髙2 天前
ios的safari下载文件 文件名乱码
前端·axios·safari·下载
一雨方知深秋3 天前
智慧商城：搜索页面基于商品名称进行搜索，分类页面点击商品进行搜索。(跳转到商品列表页面，地址栏携带的参数作为请求的参数进行请求，然后动态渲染）
前端·javascript·vue.js·axios·get·query·params
一雨方知深秋8 天前
购物车案例--分模块存储数据，发送请求数据渲染，底部总计数量和价格
前端·javascript·vue.js·axios·vuex·actions·mutations
啊·贤14 天前
初级报错：循环引用
前端·javascript·vue3·axios
励碼15 天前
从一个Bug谈前端响应拦截器的应用
前端·vue·bug·axios
景天科技苑18 天前
【Vue axios】vue中如何通过axios异步请求后端接口
前端·javascript·vue.js·axios·异步请求
前端与小赵24 天前
什么是Axios，有什么特点
前端·axios
折腾的小飞25 天前
前端通用Axios 请求拦截配置
前端·javascript·vue.js·axios·anti-design-vue
蜗牛丨1 个月前
Go Vue3 CMS管理后台(前后端分离模式)
mysql·docker·go·vue3·axios·gin·jwt·分页·跨域·ant design vue·log·gorm·otp动态码登录·validator·模型绑定·权限判断
killsime1 个月前
uniapp前端开发,基于vue3,element plus组件库,以及axios通讯
elementui·uni-app·vue·axios
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）