vue3.0(十六)axios详解以及完整封装方法-axios简介

时间：2024-07-06 21:29:24

axios与后台进行数据交互， Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

1. promise

异步编程的一种解决方案

  1. 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
  2. Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
  3. Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 (英语意思就是“承诺”，表示其他手段无法改变)
  4. 与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

2. axios特性

  1. 从浏览器创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消请求
  7. 超时处理
  8. 查询参数序列化支持嵌套项处理
  9. 自动将请求体序列化为：
    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)
  10. 将 HTML Form 转换成 JSON 进行请求
  11. 自动转换JSON数据
  12. 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
  13. 为 node.js 设置带宽限制
  14. 兼容符合规范的 FormData 和 Blob（包括 node.js）
  15. 客户端支持防御XSRF

3. 安装

使用 npm:

 npm install axios

使用 bower:

bower install axios

使用 yarn:

yarn add axios

使用 jsDelivr CDN:

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

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

为了直接使用 require 导入预构建的 CommonJS 模块（如果您的模块打包器无法自动解析它们），我们提供了以下预构建模块：

const axios = require('axios/dist/browser/axios.cjs'); // browser
const axios = require('axios/dist/node/axios.cjs'); // node

4. 请求方法

  • get：获取数据，请求指定的信息，返回实体对象
  • post：向指定资源提交数据（例如表单提交或文件上传）
  • put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
  • patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
  • delete：请求服务器删除指定的数据
  • head：获取报文首部
  1. post方法
    post请求常用的数据请求格式有三种：

1、Content-Type : application/x-www-form-urlencoded。
ajax默认的数据格式。请求体中的数据会以json字符串的形式发送到后端。
2、Content-Type : application/json ; charset=utf-8。
axios默认的数据格式。请求体中的数据会以普通表单形式（键值对）发送到后端。
3、Content-Type : multipart/form-data 。
它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

5. 请求方法别名

为了方便起见，axios为所有支持的请求方法提供了别名:

  • axios(config)
  • axios.request(config)
  • axios.get(url [,config])
  • axios.post(url [,data [,config]])
  • axios.put(url [,data [,config]])
  • axios.delete(url [,config])
  • axios.patch(url [,data [,config]])
  • axios.head(url [,config])

6. 浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8+

7. 并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。

  • axios.all(iterable)：iterable 是一个可以迭代的参数如数组等
  • axios.spread(callback)：callback 要等到所有请求都完成才会执行
<template>
  <div class="hello">......</div>
</template>
 
<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  created() {
    // 并发请求
    // 并发请求用到了axios的两个方法：axios.all('参数是一个数组')、axios.spread('回调函数')
    axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
      axios.spread((dataRes, cityRes) => {
        console.log(dataRes, cityRes);
      })
    );
  },
};
</script>
<style scoped>
</style

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理即可。
并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

相关文章