前后端数据交互(五)——什么是 axios?

axios是一个基于Promise的HTTP库,可在浏览器和node.js中使用。它支持Promise API,提供请求和响应拦截,自动转换JSON数据等功能。文章详细介绍了axios的安装、基本用法、并发请求、全局配置、实例化、拦截器的使用,以及在实际项目中的常见应用场景。适合前端开发者了解和掌握axios的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、什么是 axios ?

axios是基于 Promise 的 ajax 封装库,也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求,是一个轻量级的库,使用时可直接引入。

二、axios 的特点

  1. 异步的 ajax 请求库。
  2. 在浏览器端和 node 端都可以使用。
  3. 支持 Promise API。
  4. 支持请求和响应拦截。
  5. 响应数据自动转换 JSON 数据。
  6. 支持请求取消。
  7. 可以批量发送多个请求。
  8. 客户端支持安全保护,免受 XSRF 攻击。

三、axios API

3.1、安装

/* npm 安装 */
npm install axios --save

/* bower 安装 */
bower install axios

/* 使用 yarn */
yarn add axios

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

注:如果简单静态页面使用,建议cdn方式引入。

3.2、axios API

向 axios 传输相关配置参数,创建请求。如:axios(config)

/* 如发送一个post请求的配置参数如下 */
axios({
 method: 'post', //请求方法
 url: '/user/12345', //访问接口
 data: { //传输数据
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
/* 如发送一个get请求的配置参数如下 */
axios({
  method: 'get',
  url: 'http://localhost:80/one',//请求接口
  responseType: 'stream'//响应形式
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('save.jpg')) //保存图片
  });

3.3、axios 请求方法

上边axios API 每发起一个请求,都需要设置它的请求方法和响应头超时等信息,使用起来比较繁琐,为了方便,axios 为所有支持的请求方法提供了别名,可直接指定方式发起请求,其他参数可通过全局设置。如:

axios('/user/id=1');

上述 axios 直接发送请求,不设置请求方式时,默认使用 get 请求,与 ajax 和 fetch 相同。所以发送的是一个get请求,也可以使用 get 方法发送,如下实例:

axios.get( 
  '1.txt' , 
  {
   params:{id:'1'}
  }
).then(res=>{
  console.log(res);
 })
 .catch(err=>{
 console.log(err);
})

可简写成 axios(url,config)。

具体的其他方法分别为:

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 ]])

3.4、批量发送请求

网络请求中往往会有多个网络请求并发执行,有时需要统一处理它们返回结果,所以axios有并发处理。axios.all()可以并行发送多个网络请求,等待请求都返回之后,继续处理。

使用语法:

/* 第一种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(res=>{
	console.log(res) //返回的res是一个数组,res[0]是第一个请求数据 res[1]是第二个请求数据
})

/* 第二种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(
 axios.spread((res1,res2)=>{
   res1 //是第一个请求返回数据
   res2 //是第二个请求返回数据
  })
)

使用 axios.spread 能够自动分割请求返回数据。

1.5、全局默认配置

全局默认配置主要作用于每个请求。既节省敲代码的时间,想修改的时候,只需修改一个就可以全部修改掉。

常见的全局默认配置有:

axios.defaults.baseURL = "http://localhost:8080/" //配置域名
axios.defaults.timeout = 6000; //单位是毫秒,设置超时时间

/* 头设置 */
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3.6、axios 实例

// 实例化的时候配置默认参数
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

之所以使用 axios 实例化,是因为全局实例化 http 请求有全局的响应拦截,当我们某些接口无法返回状态码时,我们将无法得到 response,此时我们需要在当前 api 中重新实例化一个 axios,设置新的响应拦截码。

3.7、拦截器

拦截器分为两个,有请求拦截和响应拦截,可以统一处理某些业务。

  • 请求拦截器:
/* 
请求拦截器
统一在发送请求之前添加token
*/
axios.interceptors.request.use(config=>{
 config.headers.token = sessionStorage.getItem("token") //添加toke
  return config
},err=>{
 console.log(err)//请求错误
})
  • 响应拦截器
axios.interceptors.response.use(response=>{
  return response
},err=>{
 console.log(err)//响应错误
})

3.8、响应内容

基本使用中,第一个实例请求成功,打印结果 console.log(res) 。返回结果如下:

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //config是在请求的时候的一些配置信息
  config: {}
}

四、axios 常见应用

axios既可以在浏览器端使用,也可以在node.js中使用。在浏览器端发送的是XMLHttpRequest,在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。

### Vue3 前后端数据交互模拟工具与方法 对于Vue3项目中的前后端数据交互模拟,存在多种有效的方法和工具来支持这一需求。这些解决方案不仅能够帮助开发者在早期阶段快速迭代界面设计,还能确保前端逻辑独立于实际的服务端环境进行测试。 #### 使用 Mock.js 进行简单而灵活的数据伪造 Mock.js 是一款广泛应用于中国互联网公司的开源库,它允许通过定义简单的规则来自动生成复杂的JSON响应结构[^3]。这种方式非常适合用来创建静态或动态的虚拟API接口,从而让前端工程师能够在没有真实后台支撑的情况下推进工作进度。例如: ```javascript // 导入 mockjs 库 import Mock from 'mockjs' // 定义随机生成器模板 const Random = Mock.Random; // 创建一个GET请求拦截器并指定URL路径匹配模式 Mock.mock(/\/api\/users/, { "list|1-10": [{ id: '@increment', name: '@cname', // 中文名字 email: '@email' }] }); ``` 上述代码片段展示了如何利用 `Mock.js` 来制造一组用户列表作为HTTP GET请求 `/api/users` 的回复内容。这里的关键在于配置好相应的路由映射关系以及期望返回的具体字段格式。 #### 配合 JSON Server 构建简易 RESTful API 服务器 除了直接嵌入式的模拟外,还可以考虑采用更接近生产环境的方式——即运行自己的小型RESTful Web Service来进行调试验证。这便是 json-server 所擅长之处;只需准备一份描述资源模型的 `.json` 文件即可迅速启动一套完整的CRUD操作集。 假设有一个名为 `db.json` 的文件如下所示: ```json { "posts": [ { "id": 1, "title": "hello", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ] } ``` 那么只需要执行命令 `npx json-server --watch db.json` 就能立即获得基于该文档所构建出来的在线服务实例了! #### Axios 或 Fetch 实现 HTTP 请求发送 无论选择了哪种形式的伪数据源,最终都需要借助合适的客户端网络通信手段去发起调用动作。现代JavaScript应用通常会倾向于使用 axios 或者原生 fetch 函数完成这项任务。下面给出一段典型的axios写法示范: ```javascript // 引入 axios 库 import axios from 'axios'; async function fetchData() { try { const response = await axios.get('/api/data'); console.log(response.data); } catch (error) { console.error(error); } } fetchData(); ``` 这段脚本说明了怎样异步获取远程地址上的信息,并处理可能发生的异常情况。值得注意的是,在开发过程中应当合理设置代理规则以解决跨域资源共享(CORS)问题,尤其是在结合像 Nginx这样的反向代理服务器部署方案时更是如此[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值