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

最新推荐文章于 2024-05-15 00:46:03 发布
最新推荐文章于 2024-05-15 00:46:03 发布
阅读量1.9w 收藏 17
点赞数 9
分类专栏： Axios 文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XSL_HR/article/details/130141944
版权

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

场景复现

最近学习与前端相关的小程序时，接触了异步请求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请求

发起一个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的相关内容
感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

Dorable_Wander
关注
  • 9
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
10-17
主要介绍了axios中封装使用、拦截特定请求、判断所有请求加载完毕的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
解决在Vue中使用axios POST请求变成OPTIONS的问题
10-14
在Vue.js应用中，当你使用axios库进行POST请求时，有时会发现浏览器实际上发送了一个OPTIONS请求，而不是预期的POST请求。这种现象通常是由于浏览器的CORS（Cross-Origin Resource Sharing，跨源资源共享）策略引起...
解决vue处理axios post请求传参的问题
11-28
很多朋友在使用vue的过程中肯定会用到axios 请求，包括现在vux中已经自带了axios，而且用法也很简单，文档中写的比较清楚，但是当我们使用post提交时，却发现有时候会出现参数没有发送到服务器的问题，我记得文档中也说了这一情况的出现，在这里我把这设置情况记录下来，方便下次需要的时候直接使用。不需要翻阅旧代码了。 下面是vux中的使用方式，很简单，把代码放置在main.js中就可以了。如果仅仅使用了vue的话，直接安装了axios的话，设置方式也雷同，就不记录了。 import qs from 'qs' import es6Promise from 'es6-promise' impo
【vue】利用axios发送请求
python全栈
09-25 1万+
保存到LocalStorage中：永久存储，只有不手动删除，永久保存到LocalStorage中。在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用。保存到sessionStorage中：关闭浏览器之后，删除内容。在api/index.js中对axios对后端请求进行统一封装。请求失败时，控制台输出的对象。请求成功时，控制台输出的对象。保存登录返回的token。固定写法，复制粘贴即可。根组件App.vue。
2024年最新Axios发送请求的方法(2)，2024年最新华为 面试
最新发布
2401_84862291的博客
05-15 914
axios.post(“http://localhost/info”, “username=张三&password=123”).then(res => {if (req.query.username == “张三” && req.query.password == “123”) {// url: “http://localhost/login?if (req.body.username == “张三” && req.body.password == “123”) {
axios配置请求头content-type 和 get/post请求方式
weixin_39255905的博客
12-27 8759
axios 发送post请求时默认是直接把 json 放到请求体中提交到后端的，axios默认的请求头content-type类型是’application/json;charset=utf-8’.头中的content-type为指定类型(这个比较常用)，这个库是 axios 里面包含的，不需要再下载了。
【汇总笔记】axios的四种请求方式及参数设置
Thea12138的博客
02-21 2952
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
axios post请求
热门推荐
sjpeter的专栏
06-06 7万+
有关axios post参数的传值问题 let data = {} axios({ url: '连接地址 path参数直接放里面', method: 'post 默认是 get', params: '必须是一个无格式对象 query参数', data: '是作为请求主体被发送的数据 body参数', timeout: 1000, headers...
axios 之get、post传参请求解析
林中明月间丶
07-31 7637
axios get | post传参方法整理_axios post传参_白瑕的博客-CSDN博客axios post params(post像get一样使用params传参)_axios.post() 的params传参_潇蓝诺依的博客-CSDN博客Axios post 传参的params 与data 的两种形式（根据java后台接口来选择）_axios post params_bug收集的博客-CSDN博客axios介绍 axios是基于Promise的，因此可以使用Promise APIaxios的请求
Axios
吃蛋糕的居居
08-04 1165
一、axios Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中 特点： -从浏览器中创建XMLHttpRequests -从 node.j创建http请求 -支持Promise API（then） -拦截请求和响应(可以取消请求) -转换请求数据和响应数据 -取消请求 -自动转换JSON 数据(自动转换是一个缺点) -客户端支持防御XSRF (跨网站请求伪造: https://en.wikipedia.org/wiki/Cross-sito_requ
Vue学习 -- 如何用Axios发送请求（get post）Promise对象 跨域请求问题
努力！加油！！
03-17 4328
如何用Axios发送请求（get post）Promise对象 跨域请求问题
Axios的Post请求传参的两种方式
sharlicy0621的博客
03-31 2万+
Axios的Post请求传参的两种方式 表单 Form Data： export const add = (article) => { return request({ url: '/api/blade-yuyihui/article/submit', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: {
使用axios请求时,发送formData请求的示例
10-16
当我们准备好`FormData`后，使用`axios`发送POST请求： ```javascript axios.post('/api/endpoint', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { // 处理成功响应 ...
解决axios发送post请求返回400状态码的问题
10-18
本文将详细解析如何处理在使用axios库发送POST请求时遇到的400状态码问题。 首先，400状态码（Bad Request）是HTTP协议中的一个状态码，它表示客户端发送的请求存在语法错误或无法被服务器理解。在本文中，这个问题...
axios常用5种请求详解
liuxin1008的博客
12-05 3783
【知识点】axios常用请求的具体写法，简便写法格式
axios的post请求所有传参方式
夏日漱石的博客
10-16 1万+
axios的post请求所有传参方式
axios请求中get与post的参数传递问题
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-10 1万+
axios的请求格式有一下几种 this.$axios({ methods: 'POST', url: '#', data: { key1: val1, key2: val2 } }) this.$axios({ methods: 'get', url: '#', params: { key1: val1,
axios学习！（配置 、get、post请求、qs配置、写法
每天都想吃好吃的
06-30 750
1、安装axios: npm install axios2、引用axios：在需要使用的页面中引用。
使用axios帮我封装一个post请求
06-06
好的，下面是使用axios封装一个post请求的示例代码： ```javascript import axios from 'axios'; function postData(url, data) { return axios.post(url, data) .then(response => response.data) .catch(error => console.error(error)); } export default postData; ``` 你可以调用上面的函数，传入相应的url和数据，就可以发送一个post请求了。注意，这个函数返回的是一个Promise对象，所以你需要使用then方法来获取响应数据，或使用catch方法来处理错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Dorable_Wander

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

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

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

打赏作者

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

抵扣说明：

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

余额充值