Axios的介绍及使用

于 2024-09-23 18:51:53 发布
阅读量1k 收藏 15
点赞数 17
分类专栏： 前端 文章标签： ajax 前端 javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wechatonly/article/details/142458828
版权

一、认识Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

以下将主要介绍Axios在客户端中的使用情况

特性：

  • 从浏览器创建XMLHttpRequests
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为：
    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)（支持二进制）
    • URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 请求进度，并提供额外的信息（速度、剩余时间）
  • 兼容符合规范的 FormData 和 Blob
  • 客户端支持防御XSRF

Axios的基本用法

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

二、使用Axios

1、请求配置/参数

axios({
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
  // 你可以修改请求头。
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  data: {
    firstName: 'Fred'
  },
  
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth 受限资源访问可能需要账号密码
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
  // 则promise 将会 resolved，否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

  // `socketPath` 定义了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，这使用 `socketPath` 。
  socketPath: null, // default

  // `proxy` 定义了代理服务器的主机名，端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
}
)

2、响应结构

.then((response)=>{
    // `data` 由服务器提供的响应
    console.log(response.data);
    //`status` 来自服务器响应的 HTTP 状态码
    console.log(response.status);
    // `statusText` 来自服务器响应的 HTTP 状态信息
    console.log(response.statusText);
    // `headers` 是服务器响应头
    // 所有的 header 名称都是小写，而且可以使用方括号语法访问
    // 例如: `response.headers['content-type']`
    console.log(response.headers);
    // `config` 是 `axios` 请求的配置信息
    console.log(response.config);
    // `request` 是生成此响应的请求
    // 在浏览器中是 XMLHttpRequest 实例
    console.log(response.request);
})

3、错误处理

.catch((error)=>{
if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
})

4、拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
移除拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

5、取消请求

AbortController
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

6、请求体自动序列化

（1）默认情况下，Axios将 JavaScript对象序列化为 JSON 。
（2）当请求头中的 content-type 是 application/x-www-form-urlencoded 时，Axios 将自动地将普通对象序列化成 urlencoded 的格式。
（3）从 v0.27.0 版本开始，当请求头中的 Content-Type 是 multipart/form-data 时，Axios 支持自动地将普通对象序列化成一个 FormData 对象。

Content-Type 表示标头用于指示资源的原始媒体类型
MIME 类型（媒体类型、内容类型）：
  • application/x-www-form-urlencoded：数据被编码成以 ‘&’ 分隔的键值对，同时以 ‘=’ 分隔键和值。键和值中非字母或数字的字符会被 URL 编码，这也是这种类型不支持二进制数据的原因（应使用 multipart/form-data 代替）。
  • multipart/form-data：每个值是在一块数据（“主体部分”）中发送的，由用户代理指定的分隔符（“boundary”）将每个部分分离开。键值在每个部分的 Content-Disposition 标头中给出。（支持二进制）

三、Axios的别名及全局配置

1、请求方式别名

  • axios.request(config)
    通用请求方法
  • axios.get(url[, config])
    用于发送 GET 请求。第一个参数是请求的 URL，第二个参数是可选的配置对象，可以包含请求头、超时设置等额外的配置。
  • axios.delete(url[, config])
    发送 DELETE 请求。用法与axios.get类似。
  • axios.head(url[, config])
    发送 HEAD 请求，只获取响应头信息而不获取响应体
  • axios.options(url[, config])
    发送 OPTIONS 请求，用于获取服务器支持的 HTTP 方法和其他信息。
  • axios.post(url[, data[, config]])
    发送 POST 请求，第一个参数是 URL，第二个参数是要发送的数据，可以是对象、字符串等，第三个参数是配置对象。
  • axios.put(url[, data[, config]])
    发送 PUT 请求，用于更新资源。用法与axios.post类似。
  • axios.patch(url[, data[, config]])
    发送 PATCH 请求，用于部分更新资源。
  • axios.postForm(url[, data[, config]])
  • axios.putForm(url[, data[, config]])
  • axios.patchForm(url[, data[, config]])
    这些方法用于发送包含表单数据的 POST、PUT 和 PATCH 请求。通常会自动设置Content-Type为application/x-www-form-urlencoded或multipart/form-data。

2、全局axios默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

四、封装：创建Axios实例并自定义功能

创建一个Axios实例 axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
实例的方法：

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

自定义实例默认值
// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
配置的优先级

config优先级 > 实例的defaults属性 > 默认值

冰镇屎壳郎
关注
专栏目录
axios介绍和使用
m0_67401153的博客
07-27 115
本文主要讲解axios的概念和基本使用。axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。从浏览器发出XMLHttpRequests请求。从node.js发出http请求。支持PromiseAPI。能拦截请求和响应。能转换请求和响应数据。取消请求。实现JSON数据的自动转换。客户端支持防止XSRF攻击。https第二步创建一个名为db.json的文件，把网站的数据复制进去。{"posts"[{"id"],[...
Promise介绍、Promise基础用法、Axios介绍和使用、Vue中应用Axios
NBAJAVA的博客
08-28 1754
Promise介绍 什么是Promise？ Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个¬对象，从它可以获取异步...
Vue 使用 axios 请求的两种方式
xiaowude_boke的博客
06-21 336
vue中的 axios请求
axios的使用及说明
m0_72167535的博客
01-01 2131
第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。
axios
最新发布
readmancynn的博客
09-05 1229
使用 vue 开发时，频繁使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。
vue axios代替ajax发送http请求
peanut的博客
11-13 702
一、GET <div id="app"> <h1>网站列表</h1> <div v-for="site in info" > {{ site.name }} </div> </div> <script type = "text/javascript"> new Vue({ el:...
axios简单使用
Daniel的博客
08-16 467
是什么 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 怎么做 简单测试get请求 json数据 测试结果 ...
axios库文件使用介绍
12-12
Vue项目中使用axios库文件进行发送请求,进行整理归纳,以便翻阅查询~
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
10-17
本文将详细介绍如何使用axios库进行HTTP请求的封装，并通过拦截器来统一处理接口请求及响应。 axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中的HTTP客户端。它是一个非常流行的库，易于使用且功能强大...
详解axios 全攻略之基本介绍与使用（GET 与 POST）
08-29
Axios 基本介绍与使用（GET 与 POST） Axios 是一个基于 Promise 的 HTTP 客户端，专门为浏览器和 node.js 服务，Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request。下面是 Axios 的基本介绍和使用方法： ...
axios的介绍与使用
张居然的博客
11-06 1583
1.1 axios是什么？前端最流行的 ajax 请求库react/vue 官方都推荐使用 axios 发 ajax 请求文档: https://github.com/axios/axios1.2 axios的特点基于 xhr + promise 的异步 ajax 请求库浏览器端/node 端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求1.3 axios常用语法axios(config): 通用/最本质的发任意类型请求的方式。
【网络请求之Axios】axios的基础用法
热门推荐
在热爱技术的路上一直前行。
06-11 1万+
代码： 结果： 代码： 结果： 结果： axios的返回值是一个Promise类型。代码： 结果： 结果： 注意：这里的请求体参数可以直接写在{}中，而不用加data 结果： 黑马vue视频，感谢llb老师。建议学习axios之前先了解一下http协议。...
axios的基本使用
qq_56088882的博客
08-03 7320
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
axios请求方法
小菜鸟的博客
11-24 6794
axios中各种方法调用接口 get方法 1.不带参数 axios.get("/user") 2.带参数 axios.get("/user",{ params:{ id:id, age:10 } } 注意这里是以对象的形式传参 post方法 axios.post("/user/", params:{ id:id } ) 注意这里以键值对的方式提交params就是键名 delete方法 1.参数为普通的字符 axios.delete("/user",{ params:{
axios的基本使用以及封装请求方法
zhou_mu_mu_xi的博客
02-24 1825
axios是基于promise对ajax的一种封装 ajax是基于mvc模型 axios基于mvvm模型 一、基本使用,首先安装axios或者引入axios 默认使用get请求 get发送无参请求: axios( { url : ’ url ’ } ).then( res => { }), get发送有参请求: axios( { url : 'url?id=1 ’ } ).then( res => { }),或者 axios( { url : 'url ’ , params : { id :
学习 axios 的使用方法
Wxin0721的博客
04-20 1125
因为学习的 Vue 要用到此请求，学习并记录一下。 Vue 和 React 的官方都比较推荐使用 axios 来进行发送请求。 正文 1. axios 安装与引入 项目中常使用这两种方式安装 npm install axios yarn add axios 学习中常使用 cdn 的方式进行引入，引入两种其一即可 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script s
axios理解和使用
qq_27009517的博客
01-25 2853
axios 如果你还是对Promise比较生疏，那你对axios的深入了解一定会存在一些壁垒，更是难以对Axios进行上层封装，因此推荐先阅读了解Promise，再上手axios 资料： axios 中文说明 axios 官网 axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。在Web端本质上就是Ajax + Promise，服务端是htttp + Promise 一、理解Axios为什么兴起 完美的结合Promise 的使用，在fetch兼容性不强的
axios的一些常见用法
qq_40479190的博客
10-25 1万+
axios 是一个在前端开发中是使用频率极高的库。它既能运行在浏览器中，又可在 Node.js 后端项目中使用。本文主要结合自己的开发项目，谈一下 axios 在浏览器中的一些常见用法。 基本用法 在项目开发中，可以通过 axios.create 创建一个实例，对该实例进行一些配置，便得到了一个专门用来与后端服务器进行通信的 ajax 函数。 const instance = a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值