Axios的简明教程

Axios是什么?

Axios是一个基于promise的HTTP客户端,可以在浏览器和node.js中使用。它提供了一种简单的方法来发送异步HTTP请求。与其他HTTP库(如Fetch)相比,Axios提供了更丰富的功能和更好的错误处理。例如,Axios支持取消请求,自动转换JSON数据,客户端支持防止CSRF,等等。

安装Axios

你可以使用npm或yarn来安装Axios:

bash 复制代码
npm install axios

或者

bash 复制代码
yarn add axios

创建Axios实例

创建Axios实例可以让你自定义配置,比如设置基础URL:

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

这样,你就可以在所有的请求中复用这个配置了。

发送GET和POST请求

使用Axios发送GET和POST请求非常简单:

javascript 复制代码
// GET请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

// POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

在这里,我们首先发送一个GET请求,然后在promise的then方法中处理响应。如果请求失败,我们可以在catch方法中处理错误。

Axios的配置选项

当您使用 Axios 发起请求时,以下是创建请求时可用的一些配置选项:

  1. url:用于请求的服务器 URL。这是必需的,其他配置项都是可选的。例如:

    javascript 复制代码
    axios({
      url: '/user',
      method: 'get',
      // 其他配置项...
    });
  2. method:请求使用的 HTTP 方法。如果未指定,默认为 GET 方法。

  3. baseURL :将自动添加到 url 前面的基本 URL。这对于为 Axios 实例的所有请求提供相对 URL 很有用。例如:

    javascript 复制代码
    axios.defaults.baseURL = 'https://api.example.com';
  4. transformRequesttransformResponse:允许在发送请求前和处理响应前对数据进行转换。例如,您可以修改请求数据或响应数据的格式。

  5. headers :自定义请求头。例如,您可以设置 X-Requested-With 头:

    javascript 复制代码
    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  6. params:与请求一起发送的 URL 参数。必须是一个简单对象或 URLSearchParams 对象。

  7. data:作为请求体发送的数据。仅适用于 PUT、POST、DELETE 和 PATCH 请求方法。

  8. timeout:指定请求超时的毫秒数。如果请求时间超过指定的超时值,请求将被中断。

  9. withCredentials:表示跨域请求时是否需要使用凭证。

  10. responseType:表示浏览器将要响应的数据类型,例如 JSON、文本等。

  11. maxRedirects:定义在 Node.js 中要遵循的最大重定向数。

  12. validateStatus:定义对于给定的 HTTP 状态码是 resolve 还是 reject promise。

Axios的拦截器

Axios允许你使用拦截器来修改请求或响应:

javascript 复制代码
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

拦截器是一种强大的工具,可以让你在请求发送或响应到达之前执行代码。例如,你可以在请求拦截器中添加认证头,或者在响应拦截器中全局处理错误。

相关推荐
秋田君1 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡3 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴4 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子4 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead4 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界5 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser6 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹6 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
ningmengjing_6 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript