写点什么

快速掌握 Axios 请求库的基本用法

作者:Liam
  • 2023-06-19
    广东
  • 本文字数:1046 字

    阅读完需:约 3 分钟

快速掌握 Axios 请求库的基本用法

Axios 是一个流行的基于 Promise 的 HTTP 请求库,用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API,可以发送各种类型的请求(如 GET、POST、PUT、DELETE 等),并处理响应数据,Axios 在前端工程化项目中有 99% 的概率会被优先选择。下面通过一个实践案例来了解它的基本使用——编写接口并调用 Apifox 生成的 Mock 数据

安装 Axios

要安装 Axios,首先需要确保本地已安装 Node.js 环境,然后选择执行如下其中一条命令:


使用 npm:


npm install axios
复制代码


使用 yarn:


yarn add axios
复制代码


使用 pnpm:


pnpm install axios
复制代码


以上命令用的是局部安装(即安装到项目目录中的node_modules文件夹下)。这是推荐的方式,因为它将 Axios 的依赖项与项目的其他依赖项隔离开来,确保每个项目都可以有自己的版本控制和管理。如果您想在全局范围内安装 Axios,可以使用-g--global选项:


pnpm install -g axios
复制代码


安装完成后,你可以新建一个以 .js 后缀结尾的文件,该文件用来发起 Http 请求,基本结构如下图所示:


接口 Mock

为了更方便接口的测试,这里使用 Apifox 的示例项目里提供的 Mock 数据。你可以访问 Apifox 的官网,下载后新建一个项目,即可进行调用。


发起请求

在发起请求之前,要先导入 Axios 库,然后根据需要,也可以定义一个全局的 URL 地址,详情如下:


const $http = require("axios");
/* baseUrl: 即请求路径,该路径可在 Apifox 的云端 Mock 查看*/const baseUrl = "https://mock.apifox.cn/......";
复制代码

GET 请求

一个 get 请求示例如下:


// get$http.get(`${baseUrl}/pet/1`).then((res) => {  console.log(res.data);});
复制代码


响应示例如下:


POST 请求

一个 post 请求示例如下:


// post$http  .post(`${baseUrl}/pet`, {    name: "太酷啦",    status: "sold",  })  .then((res) => {    console.log(res.data);  });
复制代码

PUT 请求

一个 put 请求示例如下:


// put$http  .put(`${baseUrl}/pet`, {    name: "test",  })  .then((res) => {    console.log(res.data);  });
复制代码

DELETE 请求

一个 delete 请求示例如下:


$http  .delete(`${baseUrl}/pet/2`) // 删除id为2的数据  .then(function (res) {    console.log(res.data);  });
复制代码

总结

以上介绍了 Axios 的基本使用,在前端工程化项目中,它经常会被单独封装,以方便前端开发人员的调用,要进一步学习可访问 Axios 的官网。另外,在后端人员还没开发好接口时,通常会使用 Mock 数据来测试业务,Apifox 提供的高级 Mock 功能很好的解决了这个需求,极大地方便了后续工作的开展。

用户头像

Liam

关注

没有一个bug是无辜的! 2021-12-23 加入

一个简单的程序员!

评论

发布
暂无评论
快速掌握 Axios 请求库的基本用法_程序员_Liam_InfoQ写作社区