axios怎么安装及使用

发布时间：2022-08-31 09:34:34 作者：iii
来源：亿速云阅读：591

Axios 怎么安装及使用

介绍

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一个简单易用的 API，可以轻松地发送 HTTP 请求并处理响应。Axios 支持拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据等功能。

安装

使用 npm 安装

要使用 npm 安装 Axios，可以在终端中运行以下命令：

npm install axios

安装完成后，你可以在项目中引入 Axios：

const axios = require('axios');

使用 yarn 安装

如果你使用的是 yarn，可以使用以下命令安装 Axios：

yarn add axios

安装完成后，你可以在项目中引入 Axios：

import axios from 'axios';

使用 CDN 引入

如果你不想使用 npm 或 yarn，也可以通过 CDN 引入 Axios。在 HTML 文件中添加以下代码：

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

引入后，你可以直接在脚本中使用 axios 对象。

基本用法

发送 GET 请求

发送 GET 请求是最常见的操作之一。以下是一个简单的例子：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts 发送了一个 GET 请求，并在控制台中打印了响应数据。

发送 POST 请求

发送 POST 请求通常用于提交数据。以下是一个简单的例子：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts 发送了一个 POST 请求，并提交了一个包含 title、body 和 userId 的对象。

发送 PUT 请求

PUT 请求通常用于更新资源。以下是一个简单的例子：

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts/1 发送了一个 PUT 请求，并更新了 id 为 1 的帖子。

发送 DELETE 请求

DELETE 请求通常用于删除资源。以下是一个简单的例子：

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts/1 发送了一个 DELETE 请求，并删除了 id 为 1 的帖子。

配置请求

全局配置

你可以通过 axios.defaults 对象设置全局配置。以下是一些常见的全局配置选项：

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

在这个例子中，我们设置了全局的 baseURL、Authorization 头和 Content-Type 头。

实例配置

你可以创建一个自定义的 Axios 实例，并为该实例设置配置。以下是一个例子：

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

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

在这个例子中，我们创建了一个自定义的 Axios 实例，并设置了 baseURL、timeout 和 X-Custom-Header。

请求配置

你可以在每个请求中覆盖全局或实例配置。以下是一个例子：

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    userId: 1
  },
  headers: {
    'X-Custom-Header': 'foobar'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们在 GET 请求中设置了 params 和 headers。

拦截器

请求拦截器

请求拦截器可以在请求发送之前对其进行处理。以下是一个例子：

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 => {
  return Promise.reject(error);
});

在这个例子中，我们在响应到达之前打印了响应数据。

错误处理

Axios 提供了多种处理错误的方式。以下是一个例子：

axios.get('https://jsonplaceholder.typicode.com/posts/invalid')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Server Error:', error.response.status);
    } else if (error.request) {
      console.error('No Response:', error.request);
    } else {
      console.error('Error:', error.message);
    }
  });

在这个例子中，我们处理了不同类型的错误，包括服务器错误、无响应错误和其他错误。

取消请求

Axios 允许你取消请求。以下是一个例子：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://jsonplaceholder.typicode.com/posts', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

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

在这个例子中，我们创建了一个取消令牌，并在需要时取消了请求。

并发请求

Axios 允许你同时发送多个请求。以下是一个例子：

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/posts'),
  axios.get('https://jsonplaceholder.typicode.com/comments')
])
  .then(axios.spread((postsResponse, commentsResponse) => {
    console.log('Posts:', postsResponse.data);
    console.log('Comments:', commentsResponse.data);
  }))
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们同时发送了两个 GET 请求，并在响应到达后分别处理它们。

自定义实例

你可以创建多个自定义的 Axios 实例，并为每个实例设置不同的配置。以下是一个例子：

const instance1 = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000
});

const instance2 = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 2000
});

instance1.get('/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

instance2.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们创建了两个自定义的 Axios 实例，并分别发送了 GET 请求。

总结

Axios 是一个功能强大且易于使用的 HTTP 客户端，适用于浏览器和 Node.js。通过本文的介绍，你应该已经掌握了如何安装和使用 Axios，以及如何配置请求、处理错误、取消请求和发送并发请求。希望本文能帮助你在项目中使用 Axios 进行 HTTP 请求。