当前位置： 首页 > news >正文

day21JS-axios数据通信

news 2024/9/25 21:22:33

1. 什么是axios

        axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，简单的理解就是ajax的封装，只不过它是Promise的实现版本。

特性：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

2. 怎么导入axios

1. 安装：在vscode的集成终端中输入 npm i axios 的命令下载axios模块。

2. 在html文件中引入

方法一：外部引入

<script src="./node_modules/axios/dist/axios.js"></script>

方法二：内部引入

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js"</script>
</body>

3. 简单的get请求

写法一：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";axios({url: "http://localhost:4003/users"}).then(function (result) {console.log(result);console.log(result.data);})</script>
</body>

写法二：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/users"})console.log(result);console.log(result.data);}</script>
</body>

4. axios可配置的属性

axios可配置的属性：

  • url ：服务器的地址。
  • method ：请求方法的类型。
  • params(用于get) / data(用于post)：传的参数。是key-value键值对。
  • headers ：请求头部信息。是key-value键值对。
  • responseType：服务器响应的数据类型。是什么数据类型，响应的数据就会转化为什么数据类型。

      例如： responseType: "json" -->服务器响应的数据是json数据

  • then((response)=>{...}) ：请求成功执行的函数。
  • catch((error)=>{...})：请求失败执行的函数。

5. axios的get配置 

5.1 配置方法一

配置模板：

        axios({url: "被访问服务器地址",// 默认请求方式为getmethod: "get",// 传递参数params: {key: value},// 设置请求头信息headers: {key: value},// 服务器响应的数据是json数据responseType: "json"}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch((error) => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/users",method: "get",params: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"})console.log(result);console.log(result.data);}</script>
</body>

5.2 配置方法二

配置模板：

        axios.get("url", {// 传递参数params: {key: value},// 设置请求头信息，可以传递空值headers: {key: value}}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch(error => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios.get("http://localhost:4003/users", {params: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"});console.log(result);console.log(result.data);}</script>
</body>

6. axios的post配置 

6.1 配置方法一

配置模板：

        axios({url: "被访问服务器地址",method: "post",// 传递参数data: {key: value},// 设置请求头信息headers: {key: value},responseType: 'json'}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch(error => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios({url: "http://localhost:4003/postusers",method: "post",data: { user: "kwj", password: "kwj123456" },headers: { "X-Token": "kwj123456" },responseType: "json"})console.log(result);console.log(result.data);}</script>
</body>

6.2 配置方法二

配置模板：

        let data = {key: value},headers = {USERID: "",TOKEN: ""};// 若无headers信息时，可传空对象占用参数位置axios.post("url", data, {headers}).then((response) => {// 请求成功let res = response.data;console.log(res);}).catch((error) => {// 请求失败，console.log(error);});

案列：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let result = await axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" });console.log(result);console.log(result.data);}</script>
</body>

7. axios并发处理

并发方法：

axios.all([ ]) ：同时发送多个请求。注意该方法的参数是数组。

axios.spread()：在then方法中执行了 axios.spread 方法。接收axios.all方法中每个请求返回的响应。

 案列1：

<body><script type="module">// 引入方法二import axios from "./node_modules/axios/dist/esm/axios.js";init();async function init() {let resultList = await axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })])console.log(resultList);}</script>
</body>

案列2：把案列1改为解构 ，下面有两种解决方法，推荐使用写法一。

<body><script type="module">// 引入方法import axios from "./node_modules/axios/dist/esm/axios.js";//写法一：解构方法init();async function init() {let [result1, result2] = await axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })])console.log(result1, result2);}
----------------------------------------------------------------------------------------//写法二：在then方法中执行了 axios.spread 方法axios.all([axios.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}),axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })]).then(axios.spread((res1, res2) => {console.log(res1, res2);}))</script>
</body>

8. axios的全局配置 

8.1 简单的全局配置 

1. 在js文件夹下创建一个request.js.js文件，并编写js文件。

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 默认导出axios接口
export default axios;

2. 在html文件中使用它

<body><script type="module">// 引入编写的文件import request from "./js/request.js";request.get("http://localhost:4003/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

8.2 axios全局配置的基础配置

axios的全局配置的好处 ：可以设置一下基础的配置，例如默认路劲，超时时间等。

request.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2. 配置默认路劲
axios.defaults.baseURL = "http://localhost:4003";
// 3. 配置超时时间
axios.defaults.timeout = 3000;//4.默认导出axios接口
export default axios;

 html文件:

<body><script type="module">// 引入编写的文件import request from "./js/request.js";request.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

8.3 创建 axios实例

        通过创建 axios实例可以访问不同的服务器路劲，用于不同的请求访问。想要访问哪些路劲可以单独创建不同的axios实例。

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.默认导出axios接口
export default instance;

2. 创建一个request2.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4004",timeout: 3000
})//3.默认导出axios接口
export default instance;

3. 创建一个html文件，引入request1.js文件和request2.js文件。

<body><script type="module">// 引入编写axios实例的文件import request1 from "./js/request1.js";import request2 from "./js/request2.js";//通过axios实例可以访问到不同的服务器的路劲request1.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

9. axios拦截器

9.1 拦截器的分类

  • 请求拦截器（成功回调函数，失败回调函数）
  • 响应拦截器（成功回调函数，失败回调函数）

9.2 请求拦截器使用方法

1. 请求拦截器

写法一：

axios.interceptors.request.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.request.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 请求拦截器的作用：一般用于发送请求时加入Cookie或者LocalStorage中的部分数据，让指定的路由请求都携带这些数据。例如：可以根据所给定的路由在请求拦截器中给特定请求添加统一的请求头部信息，例如token。

案列：

1. 创建一个request1.js文件:

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.请求拦截器
instance.interceptors.request.use((request) => {// 请求成功，判断是否是注册页面的路由或者是登录页面的路由if (!/register|login/.test(request.url)) {//添加请求头部信息request.headers.user = localStorage.user;request.headers.token = localStorage.token;}return request;
}, (error) => {//请求失败return error;
})//4.默认导出axios接口
export default instance;

2. 创建一个html文件，引入request1.js文件。

<body><script type="module">// 引入编写axios实例的文件import request1 from "./js/request1.js";import request2 from "./js/request2.js";//通过axios实例可以访问到不同的服务器的路劲request1.get("/users", {params: { a: 4, b: 3 },headers: { "X-Token": "kwj123456" },responseType: "json"}).then(function (res) {console.log(res);})</script>
</body>

9.3 响应拦截器使用方法

1. 响应拦截器：

写法一：

axios.interceptors.response.use(成功回调函数，失败回调函数）

写法二：

axios实例对象名.interceptors.response.use(成功回调函数，失败回调函数）

请求拦截器中有两个回调函数，一个是请求成功时的拦截器，一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。

2. 响应拦截器的作用：

  • 预先解析处理部分接口相同的数据。
  • 接收服务器返回的数据时，可以得到服务器设置的部分头部信息、Cookie或者LocalStorage中数据直接进行存储。
  • 当响应的结果有问题时，可以使用响应拦截器进行处理，控制路由的跳转。比如发信息时没有携带token,这时候返回的信息中提示没有携带token就可以跳转到登录页面。

案列：

// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";// 2.创建axios实例
const instance = axios.create({baseURL: "http://localhost:4003",timeout: 3000
})//3.请求拦截器
instance.interceptors.request.use((request) => {// 请求成功，判断是否是注册页面的路由或者是登录页面的路由if (!/register|login/.test(request.url)) {//添加请求头部信息request.headers.user = localStorage.user;request.headers.token = localStorage.token;}return request;
}, (error) => {//请求失败return error;
})//4.响应拦截器
instance.interceptors.response.use((response) => {if (!/register/.test(response.url)) {//获取请求头部信息localStorage.user = response.headers.user;localStorage.token = response.headers.token;// boll为false时,err为true时if (!response.data.result.boll || response.data.err) {// 跳转到登录页面}}return response;
}, (error) => {//请求失败return error;
})//5.默认导出axios接口
export default instance;


http://www.mrgr.cn/news/28864.html

相关文章：

  • osg中显示3dtiles和cesiumIon
  • 一键更换软件源的工具——chsrc
  • fiddler抓包02_安装
  • Chainlit集成LlamaIndex并使用通义千问模型实现AI知识库检索网页对话应用增强版
  • 经典sql题（七）查找直播间最大在线人数
  • 【算法】差分思想：强大的算法技巧
  • 【补充篇】Davinci工具要求的dbc格式
  • 访谈心脑血管名医黄力医生：医术精湛，心系患者
  • 如何提高网站搜索排名
  • AI大模型
  • 98-策略模式的理解
  • 240. 搜索二维矩阵 II
  • 【OJ刷题】双指针问题6
  • 从0-1 用AI做一个赚钱的小红书账号（不是广告不是广告）
  • PowerShell脚本编写:自动化Windows开发工作流程
  • 网络安全笔试进阶练习题，来测测你能答对几个？
  • 正版138JAVA部署mysql5.5.JDK环境
  • 经典sql题（八）SQL 查询详细指南总结一
  • C++中的new与delete
  • 欧美游戏市场的差异