Axios简单说明,快速上手

Ajax:异步的JavaScript和XML

作用:

  1. 数据交换
  2. 异步交互

Axios:就是对原生Ajax进行封装,简化书写,快速开发

使用逻辑:

首先要安装Axios,可以通过npm在项目中安装:

  1. 打开命令行工具,进入项目根目录

  2. 运行以下命令来安装Axios:

    npm install axios

  3. 安装完成后,你可以在项目中引入Axios来发送HTTP请求。在JavaScript文件中引入Axios的方法如下:

javascript 复制代码
const axios = require('axios');

或者如果你是在浏览器环境中使用Axios,你可以通过<script>标签引入CDN:

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

这样就可以开始使用Axios来发送网络请求了。

javascript 复制代码
  axios({
    method:'GET',
    url:"http://localhost:3000/api/data"
  }).then((result)=>{           //成功回调函数
    console.log(result.data);
  }).catch((err)=>{             //失败回调函数
    alert(err);
  });

method:请求方式,GET/POST....
url:请求路径
data:请求数据(POST)
params:发送请求时携带的url参数 如:...?key=val

Axios-请求方式别名

为了方便起见,Axios已经为所有支持的请求方法提供了别名

在Axios中,可以通过提供不同的方法来发送不同类型的HTTP请求。下面是一些常用的Axios请求别名方法:

axios.request(config):发送自定义请求,可以定义请求的方法、URL、请求头、请求体等配置。

javascript 复制代码
axios.request({
  method: 'post',
  url: 'https://api.example.com/custom_request',
  data: {
    key: 'value'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

axios.get(url[, config]):发送GET请求,配置可以包括params、headers等。

javascript 复制代码
axios.get('https://api.example.com/get_data', { params: { id: 123 } })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

axios.delete(url[, config]):发送DELETE请求,可以设置URL和请求配置。

javascript 复制代码
axios.delete('https://api.example.com/delete_data', { params: { id: 456 } })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

axios.post(url[, data[, config]]):发送POST请求,同时可以传递请求体数据和配置。

javascript 复制代码
axios.post('https://api.example.com/post_data', { key: 'value' }, { headers: { 'Content-Type': 'application/json' } })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

axios.put(url[, data[, config]]):发送PUT请求,可以传递URL、请求体数据和配置。

javascript 复制代码
axios.put('https://api.example.com/put_data', { key: 'value' })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

通过使用这些请求别名方法,你可以更加方便地发送不同类型的HTTP请求。

输出先后顺序:

原因:Ajax是异步请求

解决方法:

异步同步化(让代码从上往下按顺序执行)

可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法,await是用来等待异步任务执行

相关推荐
白水先森22 分钟前
ArcGIS Pro 车牌分区数据处理与地图制作全攻略
经验分享·arcgis·arcgispro
KY_chenzhao2 小时前
地理信息系统(ArcGIS)在水文水资源及水环境中的应用:空间数据管理‌、空间分析功能‌、‌可视化表达‌
arcgis·gis·水文水资源·地理信息
凉生阿新16 小时前
【React】React + Tailwind CSS 快速入门指南
css·react.js·arcgis
WangYan202218 小时前
ArcGIS水文水资源水环境应用实战:从入门到精通!ArcGIS水文分析及流域特征提取;湖泊水库水环境监测及评价;河道水污染预测与水环境容量计算等
arcgis·水文分析·水环境·水文·水资源
岁月如歌,青春不败3 天前
地理信息系统(ArcGIS)在水文水资源、水环境中的技术应用
arcgis·水文水资源·水质模型·水文模型·地理信息系统·水文资源·洪水
gis收藏家3 天前
使用开放数据、ArcGIS 和 Sklearn 测量洛杉矶的城市相似性
人工智能·arcgis·sklearn
白水先森4 天前
ArcGIS Pro建库中常用公式的应用与技巧
经验分享·arcgis·arcgispro
白水先森4 天前
牵引线标注:让地图信息更清晰的ArcGIS Pro技巧
开发语言·javascript·经验分享·arcgis·arcgispro
白水先森4 天前
ArcGIS 工程文件到 ArcGIS Pro 的无缝迁移:详细步骤与技巧
经验分享·arcgis·arcgispro