axios起步——介绍和使用 post请求

news2024/11/20 22:37:53

axios起步——介绍和使用+基本用例+post请求

  • 场景复现
  • 核心干货
    • axios简介
      • axios是什么？
      • axios特性
      • axios安装
    • axios基本用例
      • 发起一个GET请求
      • 用axios发起POST请求
        • 发起一个POST请求
        • 发起多个POST请求
      • 利用json-server创建服务，发起四种请求

场景复现

最近学习与前端相关的小程序时，接触了异步请求api的封装和实现，涉及到了很多底层的基础知识，比如ajax和axios工具，因此计划用两个专栏来系统的学习关于axios和ajax的实用知识。

核心干货

在这里插入图片描述

🔥🔥🔥axios官方中文文档：https://axios-http.com/zh/
🔥🔥🔥ajax文档：https://www.runoob.com/ajax/ajax-tutorial.html

axios简介

在这里插入图片描述

axios是什么？

  • Axios是目前最流行的ajax封装库，能够很方便地实现ajax请求的快速发送。
  • Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
  • 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios特性

  • 从浏览器发出 XMLHttpRequests请求。
  • 从 node.js 发出 http 请求。
  • 支持 Promise API。
  • 能拦截请求和响应。
  • 能转换请求和响应数据。
  • 取消请求。
  • 实现JSON数据的自动转换。
  • 客户端支持防止 XSRF攻击。

axios安装

推荐安装node.js，使用npm包进行安装。
使用 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>

axios基本用例

首先，我们需要注意CommonJS的用法，为了在CommonJS中使用 require() 导入时获得TypeScript类型推断（智能感知/自动完成），请使用以下方法：👇👇

const axios = require('axios').default;
// axios.<method> 能够提供自动完成和参数类型推断功能

发起一个GET请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

注意:

  • 由于async/await 是ECMAScript 2017中的一部分，而且在IE和一些旧的浏览器中不支持，所以使用时务必要小心。
  • 但是现在主流的异步请求多采用async和await语法，优雅高质地实现异步请求。

用axios发起POST请求

  • 可以借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单饿并且能够接受restful的服务。
  • github地址：https://github.com/typicode/json-server

发起一个POST请求

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

发起多个POST请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

利用json-server创建服务，发起四种请求

json-sever的使用：

  • 安装——这里我们依然使用npm包和命令行进行安装。（需要提前安装好最新版本的node.js）
npm install -g json-server
  • 创建一个名为db.json的文件，把网站的数据复制进去
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
  • 启动命令
json-server -- watch db.json

在这里插入图片描述
如果控制台显示以上内容，则说明json-server已经启动。下面试试访问http://localhost:3000/posts
在这里插入图片描述
这个时候已经说明访问成功。
下面我们编写一个简单的逻辑来发起四种请求（get、post、put、delete）👇👇👇

详细代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
    <button id="btn1">发送get请求</button> <br><br>
    <button id="btn2">发送post请求</button><br><br>
    <button id="btn3">发送put请求</button><br><br>
    <button id="btn4">发送delete请求</button>

    <hr>

    <div>其他发送请求的api:</div><br><br>
    <button id="btn5">发送get请求1</button> <br><br>
    <button id="btn6">发送post请求1</button><br><br>
    <button id="btn7">发送put请求1</button><br><br>
    <button id="btn8">发送delete请求1</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //发送get
    document.getElementById("btn1").onclick = function(){
       axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn2").onclick = function(){
       axios({
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
            title:"axios学习",
            author:"Yehaocong"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    //发送put
    document.getElementById("btn3").onclick = function(){
       axios({
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
            title:"axios学习",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
       axios({
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
           console.log(response);
       })
    };



    //其他发送请求的api

    
    document.getElementById("btn5").onclick = function(){
        //发送get,使用get，第一个参数时url，第二个参数时config配置对象
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn6").onclick = function(){
        //发送post请求，第一个参数时url，第二个参数时请求体，第三个参数时config配置对象
        axios.post("http://localhost:3000/posts",
        {title:"axios学习2",
            author:"Yehaocong2"})
            .then(response=>{
           console.log(response);
       })
    };
    //发送put,
    document.getElementById("btn7").onclick = function(){
        //发送put,接收三个参数，url  请求体 、 config配置对象
       axios.put("http://localhost:3000/posts/2",{title:"axios学习",
            author:"Liaoxiaoyan"})
       .then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
        //发送delete请求，接收2个参数， url config配置对象
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
           console.log(response);
       })
    };

    //这个与axios({})基本相同
    // axios.request({

    // })
</script>
</html>

对于请求结果的结果分析：
在这里插入图片描述

以上就是关于axios起步入门和简单用例的分享，相信看完这篇文章的小伙伴们一定有了一定的收获。当然，可能有不足的地方，欢迎大家在评论区留言指正！

下期文章将介绍axios API的相关内容
感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/428211.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue：组件化开发

Vue：组件化开发

一、组件的使用 1、创建组件(结构HTML 交互JS 样式CSS) Vue.extend({该配置项和new Vue的配置项几乎相同&#xff0c;略有差别}) 区别&#xff1a;①创建vue组件的时候&#xff0c;配置项中不能使用el配置项。(但是需要使用template配置项来配置模板语句) ②配置项中的da…
阅读更多...
Vue常用方法汇总【更新中】

Vue常用方法汇总【更新中】

文章目录vue-router 安装使用axios 安装使用vuex 安装使用插件使用方法&#xff08;含elementUI安装方法&#xff09;全局变量使用方法父子组件传值方法pythonvue 打包 windows 桌面应用fastApivue 实现 WebSockets 服务端推送在 docker 中使用 nginx 部署 vue 项目声明式路由导…
阅读更多...
详解FreeRTOS中的信号量(semaphore)

详解FreeRTOS中的信号量(semaphore)

信号&#xff0c;顾名思义最基础的作用是通知&#xff0c;量&#xff0c;表示数量&#xff0c;意思就是可以有多个信号。在不同的场景延伸下&#xff0c;还有同步和互斥访问资源的作用&#xff08;这都是通知作用的延伸&#xff09;。 当"量"没有限制时&#xff0c;…
阅读更多...
SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式，系统详解springcloud微服务技术栈（Eureka、Ribbon）

SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式，系统详解springcloud微服务技术栈（Eureka、Ribbon）

微服务技术栈导学 微服务技术是分布式架构&#xff08;把服务做拆分&#xff09;的一种 而springcloud仅仅是解决了拆分时的微服务治理的问题&#xff0c;其他更复杂的问题并没有给出解决方案 一个完整的微服务技术要包含的不仅仅是springcloud 微服务技术栈 包括什么 …
阅读更多...
什么是远程办公，如何挑选远程办公软件

什么是远程办公，如何挑选远程办公软件

远程办公已经不再是新型工作模式&#xff0c;随着科技的发展和全球化的趋势&#xff0c;越来越多的企业和个人已经开始接受这种新型的工作模式。远程办公可以让员工在家里或者任何地方工作&#xff0c;不用去公司办公室&#xff0c;大大提高了员工的工作效率和生活质量。本文将…
阅读更多...
hdfs命令行操作

hdfs命令行操作

文章目录1. 对文件夹进行操作1.1 ls:对路径进行访问1.2 mkdir:对路径进行创建1.3 rm:对路径进行删除2.对文件进行操作2.1在文件系统中创建空文件2.2上传本地文件到hdfs上2.3 从hdfs上下载文件到本地路径2.4 查看hdfs 上的文件内容2.5 对hdfs上的文件进行复制2.6 追加本地文件内…
阅读更多...
微服务·入门·贰——注册中心nacos、eureka

微服务·入门·贰——注册中心nacos、eureka

文章目录1. 微服务问题解决服务治理问题1.1 问题抛出1.2 解决方法2 Eureka注册中心2.1 Eureka解决的问题2.2 Eureka的结构和作用2.2.1 Eureka的作用2.2.2 order-service如何得知user-service实例地址 &#xff1f;2.2.3 order-service如何从多个user-service实例中选择具体实例…
阅读更多...
家政服务小程序实战开发教程019-我的预约功能（已完结）

家政服务小程序实战开发教程019-我的预约功能（已完结）

我们上一篇讲解了用户注册的功能&#xff0c;注册完毕后页面需要显示用户的头像和昵称&#xff0c;并显示我的预约的菜单&#xff0c;本篇我们介绍一下如何开发。 1 显示用户头像和昵称 在未注册时我们显示了一个默认的头像&#xff0c;已注册需要显示用户的头像。思路是将未…
阅读更多...
【零基础入门 Nginx】——万字文章通俗易懂

【零基础入门 Nginx】——万字文章通俗易懂

一、Nginx 简介 1️⃣ Nginx 概述 Nginx&#xff08;Engine X&#xff09; 是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强。同时也提供了IMAP/POP3/SMTP服务 nginx可以作为静态页面的web服务器&#xff0c;同时还支持CGI协议的动态…
阅读更多...
WebRTC 系列（二、本地通话，H5、Android、iOS）

WebRTC 系列（二、本地通话，H5、Android、iOS）

WebRTC 系列&#xff08;一、简介&#xff09;​​​​​​​ 一、整体流程 有了上一篇 WebRTC 简介的基础&#xff0c;我们知道了 WebRTC 的工作流程&#xff0c;接下来就是需要用代码去实现这个流程了。对于不同端&#xff0c;实现起来的难易程度可能略微不同&#xff08;实…
阅读更多...
RHCE第二次作业ssh远程连接和NTP时间服务器

RHCE第二次作业ssh远程连接和NTP时间服务器

1.配置ntp时间服务器&#xff0c;确保客户端主机能和服务主机同步时间 在服务器准备工作查看服务是否开启&#xff0c;查看是否运行 同步时间&#xff0c;编辑/etc/chrony.conf,层级优先级10&#xff0c;在允许客户机。 暂时关闭防火墙&#xff0c;关闭服务后&#xff0c;重启…
阅读更多...
vue3-element-plus表单校验和多选表格table的基本使用

vue3-element-plus表单校验和多选表格table的基本使用

表单校验 <script setup> import { ref } from "vue"; // 登录的表单数据(绑定到最外层的from标签上) //里面的每个属性都与element-plus的表单标签进行双向绑定,具体可以看html代码 const loginForm ref({username: "",password: "",lo…
阅读更多...
双向可控硅详细用法说明

双向可控硅详细用法说明

可控硅作为功率开关器件&#xff0c;在各种需要控制功率的电子产品中经常用到&#xff0c;我所涉及的行业为家电产品研发&#xff0c;比如发热丝、发热管的控温&#xff0c;或者AC电机、水泵的控速等&#xff1b;由于双向可控硅是在单向可控硅的基础上发展而来且应用场景更广&a…
阅读更多...
ucgui的触摸执行过程

ucgui的触摸执行过程

在STM32上调试ucosucguI的触摸时&#xff0c;显示上下左右中5个button&#xff0c;但是按上button时触发的却是右button&#xff0c;调试发现显示区域大小正常&#xff0c;触摸区域大小正常。但就是触摸区域无法与实际的button相对应。 分析原因可能是xy轴不匹配&#xff0c;那…
阅读更多...
手撕深度学习中的优化器

手撕深度学习中的优化器

深度学习中的优化算法采用的原理是梯度下降法&#xff0c;选取适当的初值params&#xff0c;不断迭代&#xff0c;进行目标函数的极小化&#xff0c;直到收敛。由于负梯度方向时使函数值下降最快的方向&#xff0c;在迭代的每一步&#xff0c;以负梯度方向更新params的值&#…
阅读更多...
web前端笔记

web前端笔记

HTML(安装live server插件) 我们上网时所看到的所有内容其实就是body里面的内容&#xff01; &#xff01; tab 快速生成一个html模板&#xff1b; https://www.runoob.com/tags/html-elementsdoctypes.html html的菜鸟教程&#xff01; html中的元素分为两种&#xff0c;一种…
阅读更多...
广州蓝景分享—13个Web开发人员都知道的基本JavaScript函数

广州蓝景分享—13个Web开发人员都知道的基本JavaScript函数

各位编程爱好者&#xff0c;今天由小蓝与大家分享13个基本的JavaScript 函数&#xff0c;如果您是 Web前端开发人员&#xff0c;您应该熟悉这些函数。 您可以将本文所有 JavaScript 函数加入收藏至您的工具箱&#xff0c;以便在您的软件项目中尽可能使用这些片段。 1. 检索任…
阅读更多...
恐怖的低代码平台，我 All in 了！

恐怖的低代码平台，我 All in 了！

本文目录一、低代码平台是什么&#xff1f;二、目前低代码产品平台是如何分类的&#xff1f;三、低代码平台是怎么互相比较的&#xff1f;一个比喻就明白了&#xff01;四、iVX平台的恐怖优势&#xff01;我 All in 了&#xff01;五、iVX的学习成本&#xff1f;总结&#xff1…
阅读更多...
百度CTO王海峰做客《中国经济大讲堂》：文心一言，读书破万亿

百度CTO王海峰做客《中国经济大讲堂》：文心一言，读书破万亿

当下&#xff0c;大语言模型热度空前&#xff0c;诸如文心一言、ChatGPT 等已经能够与人对话互动、回答问题、协助创作&#xff0c;逐渐应用于人们的工作和生活&#xff0c;也引发了社会热议。近日&#xff0c;百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰再…
阅读更多...
asp.net Core 6 从空建立一个MVC项目，Razor组件使用

asp.net Core 6 从空建立一个MVC项目，Razor组件使用

Razor组件使用MVC项目创建创建空的Web项目添加MVC框架Razor组件使用准备封装Razor组件MVC项目创建 创建一个空的项目&#xff0c;然后添加MVC。 创建空的Web项目 添加MVC框架 1.添加文件夹 2.添加控制器 3.添加界面 4.修改program.cs文件内容 //原生的 //var builder …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023