首页 > 编程语言 >一起来学javascript-axios

一起来学javascript-axios

时间:2024-06-13 15:02:48浏览次数:13  
标签:起来 Axios console 请求 javascript axios error data

      <!--

// AJAX 的封装插件—— Axios。

    // 什么是 Axios

    // Axios 是一个基于 Promise 的 HTTP 库,可以用于浏览器和 Node.js,支持 Vanilla JS、Angular、React、Vue 等框架。

    // 简单的理解就是对 Ajax 的封装,且具有易用、简洁、高效等特点。

    // 相比原生的 fetch,Axios 提供了更多便利的功能,如拦截请求和响应、转换请求和响应数据、取消请求等。使用 Axios 发起请求通常更直观,且对于错误处理更加友好。

    // await fetch('https://api.example.com/data')

    // 例如,用 Axios 获取与上述 fetch 示例相同数据的代码看起来会是这样:

    // axios.get('https://api.example.com/data')

    //   .then(response => {

    //     // 处理成功情况,response.data 包含了服务器返回的数据

    //     console.log(response.data);

    //   })

    //   .catch(error => {

    //     // 处理错误情况

    //     console.error("Error fetching data:", error);

    //   });

    // 或者,如果你在支持 async/await 的环境中,可以这样写:

    // javascript

    // try {

    //   const response = await axios.get('https://api.example.com/data');

    //   console.log(response.data);

    // response.data为从后端请求的数据

    // } catch (error) {

    //   console.error("Error fetching data:", error);

    // }

    //     Axios 的特点

    // 它本身具备以下作用:

    // 可以从浏览器中创建 XMLHttpRequest。

    // 能从 Node.js 创建 HTTP 请求。

    // 支持 Promise API。

    // 能够拦截请求和响应。

    // 可以转换请求和响应数据。

    // 也可取消请求。

    // 可以自动转换 JSON 数据。

    // 在客户端支持防止 CSRF/XSRF 攻击。

    // Axios 的安装方式

    // Axios 的安装与其他框架或插件类似,也是分为以下两种:

    // npm 安装

    //  cmd命令下输入:

    // npm install axios

    // 或使用 <script>直接引入

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

    // Axios 基本用法

    // Axios 提供了对 GET、POST、PUT、DELETE 等HTTP方法的封装,使得进行 AJAX 请求变得更加简单。

    // 在这里给大家介绍axios的get和post方法,分别向后端请求和发送数据

    get请求数据

    首先,创建一个名为 test.json 的文件,作为接下来使用 Axios 请求的数据文件,并写入以下数据:

    {

  "msg": "Hello Axios!"

    }

    在 demo1.html 中使用 Axios 发送一个简单的 Ajax 请求,用于获取 test.json 中的数据,并输出在控制台:

    首先要引入axios.js文件

<script type="text/javascript">

  axios.get("./test.json").then((res) => {

    console.log(res.data);

  });

  ./test.json在这里相当于url(请求的数据的地址)

</script>

post发送数据

axios.post(

    "url",

    { data: {} },

    {

      headers: "xxxx", // 头部配置

    }

  )

  .then(function (res) {

    console.log(res); // 处理成功的函数 相当于 success

  })

  .catch(function (error) {

    console.log(error); // 错误处理 相当于 error

  });

 data指将要发往后端的数据

-->

标签:起来,Axios,console,请求,javascript,axios,error,data
From: https://blog.csdn.net/m0_74762754/article/details/139654521

相关文章

  • 使用 JavaScript 中的 DeviceOrientationEvent
    在前端开发中,DeviceOrientationEvent是一个非常有用的API,它允许我们访问设备的物理方向信息,如设备的倾斜和旋转。这个API可以在移动设备上获取设备的方向,可以用来创建各种有趣和交互性强的应用程序,比如游戏、增强现实体验等。本文将介绍如何使用DeviceOrientationEventAP......
  • JavaScript-DOM
    DOM全称:DOM(DocumentObjectModel--文档对象类型) 作用:用来操控网页类容的功能,开发网页特效和实现用户交互DOM结构将HTML文档以树形结构表现出来称之为DOM树获取DOM 语法:document.querySelector('css选择器')参数:包含一个或多个css选择器字符串返回值:CSS选......
  • vue项目中axios封装(数据请求封装)
    一、定义utils(工具类)目录,并创建两个文件,request.js与http.jsrequest.js用于创建axios,并在请求/响应拦截时对需要传递的数据进行处理。//引入axiosimportaxiosfrom'axios'//使用前要先安装依赖:npminstallaxios//引入element-ui信息import{Message}from"elemen......
  • web网页设计期末课程大作业:家乡旅游主题网站设计——河北8页html css javascript
    ......
  • 【保姆级详细介绍JavaScript初识及基本语法】
    ......
  • JavaScript获取表单数据转换时间格式(学习自用)
    JavaScript获取表单数据转换时间格式:getTime(date){letdateNow=newDate(date);functionconvert(data){//时间为个位数时,前面加个0,使观感更好returndata<10?"0"+data:data;}letyear......
  • 二级web基础操作题练习(6)——嵌入Javascript代码
    -----要求----- 用JavaScript编写如图1所示页面,当在第一个文本框中输入URLhttp://test.cn/index.jsp?key0=0&key1=1&key2=2,点击按钮“解析参数“后,在下面的三个文本框中分别显示解析出来的参数,如图2所示。图1图2 -----代码示例-----<html><head><!--设置字符编......
  • JavaScript常用的流程控制语句
    在JavaScript中,有以下几种常用的流程控制语句:if...else:当if条件为假时,可以使用else语句执行另一段代码。if(condition){//条件为真时执行的代码}else{//条件为假时执行的代码}if...elseif...else:可以链式使用多个if和elseif来根据多个条件执行不......
  • JavaScript判断数据为对象(转载)
    1.javaScript判断数据为对象1.1. Object.prototype.toString.call()2.JavaScript如何判断数据类型2.1. typeof2.2. Array.isArray()2.3. instanceof2.4. Object.prototype.toString.call()2.5. constructor2.6. 使用ES6的Symbol.toStringTa......
  • 基本数据类型 String,null 和 undefined,运算符,流程控制,JavaScript之数组,数组常用
    Ⅰ基本数据类型String【一】String类型String类型就是字符串类型【二】定义变量【1】常规变量var变量名="变量值";//一般用这种var变量名='变量值';不支持三引号【2】可以先声明不赋值先用varb;再对变量b赋值varb='6';【三】字符串的格式化输出语法......