Axios 详解与使用指南

已于 2024-08-12 17:02:37 修改
阅读量2.1k 收藏 34
点赞数 16
文章标签： 前端 http
于 2024-08-12 17:01:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67793437/article/details/141135733
版权

Axios 详解与使用指南

1. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 环境中运行。它提供了一种简便的方式来执行 HTTP 请求，并支持多种请求方法，如 GET、POST、PUT、DELETE 等。Axios 的配置灵活，支持请求和响应拦截器、取消请求、并发请求处理等功能，使其成为现代 Web 开发中非常流行的选择。

2. Axios 特性

  • 基于 Promise：Axios 完全支持 Promise，使得异步操作更加直观，特别是在使用 async/await 时。
  • 支持多种请求方式：支持常见的 HTTP 请求方法，满足不同的请求需求。
  • 浏览器与 Node.js 兼容：Axios 可同时在前端和后端项目中使用。
  • 拦截器：提供请求和响应拦截器，允许在请求或响应到达之前进行处理。
  • 自动转换 JSON 数据：自动将 JSON 数据转换为 JavaScript 对象。
  • 请求取消：支持通过 CancelToken 取消请求。
  • 并发请求处理：支持 axios.all 等方法，处理多个并发请求。

3. Axios 安装与引入

3.1 使用 npm 安装

npm install axios

3.2 使用 Yarn 安装

yarn add axios

3.3 在项目中引入

在 ES6 模块化的项目中使用：

import axios from 'axios';

或者在 CommonJS 模块化的项目中使用：

const axios = require('axios');

4. Axios 基本使用

4.1 GET 请求

axios.get('/api/user', {
  params: {
    ID: 12345
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4.2 POST 请求

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4.3 并发请求

function getUser() {
  return axios.get('/api/user');
}

function getProfile() {
  return axios.get('/api/profile');
}

axios.all([getUser(), getProfile()])
.then(axios.spread((user, profile) => {
  console.log('User:', user.data);
  console.log('Profile:', profile.data);
}))
.catch(error => {
  console.error(error);
});

5. Axios 配置项

5.1 全局配置

Axios 提供了全局配置，允许您设置默认的请求行为。您可以通过 axios.defaults 来设置全局配置，这些配置会应用到每个请求中。

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

5.2 请求配置

在发送请求时，可以通过配置对象自定义请求行为。这些配置项包括但不限于以下内容：

  • url：请求的 URL，默认为请求的相对路径。
  • method：请求方法，如 get、post 等，默认值为 get。
  • baseURL：将自动加在 url 前面，除非 url 是一个绝对 URL。
  • headers：自定义请求头。
  • params：GET 请求的 URL 参数，PUT、POST 请求的 data 会自动序列化为查询字符串。
  • data：PUT、POST、PATCH 请求的请求体。
  • timeout：请求超时设置（毫秒），如果请求超时，将触发 timeout 错误。
  • responseType：返回的数据格式，如 json、blob、document、arraybuffer、text、stream。
  • withCredentials：表示跨域请求时是否需要使用凭证，默认为 false。
const config = {
  // 请求的 URL
  url: '/api/user',

  // 请求方法
  method: 'get', // 可以是 'get', 'post', 'put', 'delete', 'patch', 'options', 'head'

  // 基础 URL，将自动加在 `url` 前面
  baseURL: 'https://api.example.com',

  // 自定义请求头
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
    'X-Custom-Header': 'foobar'
  },

  // URL 参数
  params: {
    ID: 12345
  },

  // POST、PUT、PATCH 请求的请求体
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },

  // 请求超时设置（毫秒）
  timeout: 5000, // 超时时间设置为5秒

  // 响应的数据类型
  responseType: 'json', // 选项有 'json', 'blob', 'document', 'arraybuffer', 'text', 'stream'

  // `transformRequest` 允许在请求数据发送到服务器之前对其进行修改
  // 该函数只适用于请求方法 'PUT', 'POST', 'PATCH'
  transformRequest: [(data, headers) => {
    // 对 data 进行任意转换处理
    data.firstName = data.firstName.toUpperCase();
    return JSON.stringify(data);
  }],

  // `transformResponse` 允许在响应数据传递给 then 或 catch 之前对其进行修改
  transformResponse: [(data) => {
    // 对 data 进行任意转换处理
    data = JSON.parse(data);
    data.fullName = `${data.firstName} ${data.lastName}`;
    return data;
  }],

  // 是否跨站点访问控制请求，默认为 false
  withCredentials: false,

  // 自定义参数序列化
  paramsSerializer: params => {
    return new URLSearchParams(params).toString();
  },

  // 取消请求
  cancelToken: new axios.CancelToken(cancel => {
    // 在请求的执行过程中，可调用 `cancel` 函数来取消请求
    // 示例：cancel('Request canceled by the user.');
  }),

  // 验证状态码是否合法，返回 true 表示合法
  validateStatus: status => {
    return status >= 200 && status < 300; // 默认的合法范围是 200-299
  },

  // 自定义处理上传进度事件
  onUploadProgress: progressEvent => {
    console.log('Upload progress:', progressEvent.loaded);
  },

  // 自定义处理下载进度事件
  onDownloadProgress: progressEvent => {
    console.log('Download progress:', progressEvent.loaded);
  }
};

// 发送请求
axios(config)
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

5.3 请求与响应数据转换

在 Axios 中，可以通过配置 transformRequest 和 transformResponse 来对请求数据和响应数据进行转换。这两个配置项分别是请求前和响应后执行的数组函数，数组中的每个函数都会依次执行。

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
}, {
  transformRequest: [(data, headers) => {
    // 在发送请求前，您可以对 data 进行自定义处理
    data.firstName = data.firstName.toUpperCase();
    return JSON.stringify(data);
  }],
  transformResponse: [(data) => {
    // 在响应到达客户端之前，您可以对 data 进行自定义处理
    data = JSON.parse(data);
    data.fullName = `${data.firstName} ${data.lastName}`;
    return data;
  }]
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

5.4 异步与同步请求

Axios 默认是异步请求，基于 Promise。通过 async/await，您可以将异步请求写成同步代码的形式：

async function getUser() {
  try {
    const response = await axios.get('/api/user');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getUser();

5.5 请求取消

Axios 提供了取消请求的功能，通过 CancelToken 来实现。您可以在需要取消请求时，调用 cancel 方法。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/user', {
  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.');

6. Axios 拦截器

6.1 请求拦截器

请求拦截器可以在请求发送前对其进行处理。例如，您可以在每次请求前自动添加 token：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => {
  return Promise.reject(error);
});

6.2 响应拦截器

响应拦截器可以在服务器响应到达客户端前对其进行处理。例如，您可以统一处理错误信息：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    console.error('未授权，请登录');
  }
  return Promise.reject(error);
});

注意：在使用拦截器时，必须确保拦截器函数有 return。否则，拦截器处理后的结果无法传递给下一个拦截器或最终的请求/响应处理。

7. 在项目中的封装与使用

7.1 封装 Axios 实例

在大型项目中，通常会封装 Axios 实例来处理通用配置和拦截器。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  }
});

// 请求拦截器
apiClient.interceptors.request.use(config => {
  // 在发送请求前可以做一些处理
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  // 在响应到达客户端前可以做一些处理
  return response.data;
}, error => {
  return Promise.reject(error);
});

export default apiClient;

7.2 处理接口与错误

在封装的 Axios 实例中，可以定义通用的错误处理逻辑，确保应用程序中的所有 API 请求都具有一致的错误处理方式。

apiClient.interceptors.response.use(response => {
  return response;
}, error => {
  // 自定义错误处理
  const { status } = error.response;
  switch (status) {
    case 401:
      console.error('未授权，请重新登录');
      break;
    case 404:
      console.error('请求资源未找到');
      break;
    default:
      console.error('请求错误', error.message);
  }
  return Promise.reject(error);
});

7.3 基本使用

在这个基础上，可以封装常见的 API 请求方法，比如 GET、POST、PUT、DELETE 等，提供更简洁的接口。

const api = {
  get(url, params = {}, config = {}) {
    return apiClient.get(url, {
      params,
      ...config
    });
  },

  post(url, data = {}, config = {}) {
    return apiClient.post(url, data, config);
  },

  put(url, data = {}, config = {}) {
    return apiClient.put(url, data, config);
  },

  delete(url, params = {}, config = {}) {
    return apiClient.delete(url, {
      params,
      ...config
    });
  }
};

export default api;

7.4 通用方法

const http = function(config) {
	return apiClient(config)
};

export default http;

Wu Youlu
关注
axios 使用方法
爱睡的虫虫
05-06 1545
一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 二、例子 1、 发送一个GET请求 //通过给定的ID来发...
vue axios全攻略
weixin_33918357的博客
03-23 4577
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！ 如果您觉得本文对您有帮助，不妨点个赞或关注收...
前端开发指南（vue版）
03-08
前端开发指南（vue版）(1)前端开发指南（vue版）(1)前端开发指南（vue版）(1)
axios详解以及完整封装方法
架构师小吴的博客
07-25 4026
”"
axios（非常全面）
my的博客
04-05 3019
项目中涉及到的多个请求的配置很多都是相同的，如get请求，其他配置可能都相同，只有url不同。那相同部分代码就会造成冗余，通过二次封装，可以实现接口代码复用。疑问：axios本身就是promise，为什么在进行封装请求方法的时候还要在外面加一层promise。后端：中间件/服务端进行跨域相关配置，在项目中新建允许跨域配置类。先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去。这里主要介绍前端的跨域解决方案,都是做配置项，实现代理转发。一些具体的业务，需要携带一些参数。在本地调试的时候，还需要在。
axios使用介绍及封装
热爱前端的大三在校生
10-15 3005
axios是基于Promise的，因此可以使用Promise API。
axios的使用
最新发布
m0_64450406的博客
08-17 1233
这包括请求的 URL、方法（如 GET、POST）、请求头（headers）、请求体（data/params）等。它的格式取决于服务器返回的内容类型（Content-Type），通常是 JSON、XML、文本等。--watch参数表示json-server将监视db.json文件的更改，并在文件更改时自动重新加载数据。: 这是一个字符串，表示服务器响应的 HTTP 状态信息，如 "OK"、"Not Found" 等。在该文件夹下，创建一个名为db.json的文件，并在其中添加json数据。
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios的使用及说明
m0_72167535的博客
01-01 2112
第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。
axios的用法
凉茶铺的博客
01-03 770
介绍了axios网络请求库的使用方法
axios的详细使用
Kepler_明的博客
12-09 646
关于axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 官网的回答 安装 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> axios的请求方式 主要请求方式无非就是增删改查，get（请求数据）
axios介绍和使用
m0_67401153的博客
07-27 110
本文主要讲解axios的概念和基本使用。axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。从浏览器发出XMLHttpRequests请求。从node.js发出http请求。支持PromiseAPI。能拦截请求和响应。能转换请求和响应数据。取消请求。实现JSON数据的自动转换。客户端支持防止XSRF攻击。https第二步创建一个名为db.json的文件，把网站的数据复制进去。{"posts"[{"id"],[...
详解Vue 2.0封装axios笔记
08-30
Vue 2.0封装axios笔记 ...本篇文章主要介绍了Vue 2.0封装axios笔记的相关知识点，包括axios的快速使用、常见用法、封装axios的理由、请求流程、错误处理和拦截器等内容，为开发者提供了详细的参考和指南。
详解ES6 Fetch API HTTP请求实用指南
12-08
**详解ES6 Fetch API HTTP请求实用指南** 在现代Web开发中，HTTP请求是不可或缺的一部分，用于从服务器获取或发送数据。随着ES6的引入，Fetch API成为了一个强大的工具，用于处理这些请求。Fetch API提供了更简洁、...
vue-template:vue模板vue vue路由器vuex axios jssdk
05-11
Vue.js 模板详解：整合Vue、Vue Router、Vuex及Axios的实践指南 Vue.js，一个由尤雨溪创建的轻量级且强大的前端框架，已经在全球范围内获得了广泛的应用。Vue Template 提供了一个全面的开发环境，整合了Vue、Vue ...
2024年Web前端最全【vue2】axios请求与axios拦截器的使用详解，前端高级面试视频
2401_84437095的博客
05-04 1045
请求拦截器：处理我们在发送请求之前需要经过的回调函数相应拦截器：服务器响应之后返回给我们之前会被执行的回调函数官网指南：拦截器 | Axios 中文文档 | Axios 中文网 (axios-http.cn)")下图为上述超链接打开之后所看到的页面：我们将上述代码copy下来（这一大段代码不需要背下来，到了工作当中也是直接去axios官方中直接copy下来我们进行应用即可呦）1.便于封装操作，我们常会建立一个专门的文件来写下我们的拦截器同基地址作为第一次封装。
axios源码中的这些实用的基础工具函数（上）
小王的技术库
10-18 529
这是我的阅读源码的第二篇文章，逐渐培养每周阅读源码并写文章记录的习惯。axios 是我们平时经常用到的网络请求库，可以同时用于 浏览器和node.js 环境中。今天我们来阅读 axios 源码，来了解其中的封装的工具函数。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
weixin_54048131的博客
07-28 587
npm i axios-S
axios
06-02
Axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js中。它的特点是： - 支持浏览器和Node.js - 支持Promise API - 支持请求和响应拦截器 - 支持取消请求 - 自动转换JSON数据 - 支持CSRF防御 Axios的安装很简单，可以使用npm安装： ``` npm install axios ``` 使用方法也很简单，在需要发送HTTP请求的地方，引入Axios并发送请求： ```javascript import axios from 'axios'; axios.get('/user', { params: { name: 'John Doe' } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 这是一个简单的GET请求示例，我们通过Axios发送了一个GET请求，请求的URL为`/user`，请求参数为`name=John Doe`，当请求成功时，打印返回的数据。如果请求失败，打印错误信息。 除了GET请求，Axios还支持POST、PUT、DELETE等HTTP方法，使用方法类似。Axios还支持请求和响应拦截器，可以在请求发送前或响应返回后对数据进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值