首页 > 编程语言 >如何在 JavaScript中将axios与async/await一起使用?

如何在 JavaScript中将axios与async/await一起使用?

时间:2022-10-15 03:00:08浏览次数:51  
标签:Axios JavaScript axios promise catch async await

Axios 是一个基于promise 的处理异步 HTTP 请求的客户端。本指南将演示如何通过async/await 处理这些请求。

安装和使用

要使用 Axios,您需要使用 npm

npm install axios

安装后,将其导入到您的 JavaScript 文件中

import axios from 'axios';

没有async/await的请求

现在,让我们看看没有 async/await的 Axios 请求是什么样子的。该函数返回一个promise。我们用于将此promise解析为 API 的响应。

import axios from 'axios';
axios.get('https://famous-quotes4.p.rapidapi.com/random')
    .then(response => {
        // Handle response
        console.log(response.data);
    })
    .catch(err => {
        // Handle errors
        console.error(err);
    });
[
  {
    "id": 13190,
    "text": "I don't have the best dating track record.",
    "category": "dating",
    "author": "Lauren Conrad"
  },
  {
    "id": 75560,
    "text": "I save every Christmas card. I keep them all.",
    "category": "christmas",
    "author": "Alison Sweeney"
  }
]

具有async/await的请求

处理promise更好,更干净的方式是通过关键字。由于关键字await,异步函数将暂停,直到promise执行结束。

import axios from 'axios';
const getData = async () => {
	const response = await axios.get(
		`https://famous-quotes4.p.rapidapi.com/random`
	);
};

错误处理

为了处理使用 Axios 的标准 API 调用中的错误,我们使用一个try\catch块。在catch块中,我们可以处理错误。下面是一个示例:

try {
	const res = await axios.get(`https://famous-quotes4.p.rapidapi.com/random`);
} catch (error) {
	// Handle errors
}

标签:Axios,JavaScript,axios,promise,catch,async,await
From: https://www.cnblogs.com/yangshu-cnu/p/16793463.html

相关文章

  • javascript获取当前是http还是https
    我们经常需要获取网页的url,此时就会用到如下:document.location.protocol//判断是https:还是http:document.location.hostname//获取是localhost还是192.168.100.......
  • JavaScript的八种数据类型
    一、JavaScript的数据类型分为两大类:1.1基本数据类型:string、number、boolean、undefined、null、symbol、bigint1.1.1Symbolsymbol类型是ES6新增......
  • JavaScript 值类型与引用类型
    JS数据类型JS有两种数据类型分别为值类型,引用类型值类型:Number、String、Boolean、Null、Undefined、Symbol(ES6);引用类型:Object;值类型值类型存放在栈中,可以直接按值......
  • JavaScript
    1、什么是JavaScript1.1、概述JavaScript是一门世界上最流行的脚本语言Java、JavaScript(10天开发出来)一个合格的后端人员,必须要精通JavaScript1.2、历史ECMAScript它......
  • JavaScript中的 || 与 &&的使用
    一、使用描述1、||和&&  以前在js逻辑代码中,常常会用到类似于三元运算的||逻辑运算符。//如果this.redirect为真,就使用它,不然就使用"/"this.$router.replace(thi......
  • Design Patterns in JavaScript Constructor, Factory, & Abstract Factory Creationa
    <html><body><h1>DesignPatternsinJavaScriptConstructor,Factory,&AbstractFactoryCreationalPatterns</h1><scripttype="text/javas......
  • javascript缩短今天的时间为时分秒格式
    我们的需求是,今天的日期只显示HH:mm:ss,这种时分秒格式看下面两个函数//今天零点functiongetTordayZero(){returnnewDate(newDate().toLocaleDateString())......
  • [HTML 5] Async clioboard
    https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_APIconstapp=document.getElementById('app');app.innerHTML=`<h1>JavaScriptHTML5APIs</h1>......
  • JavaScript简单特效:页面背景颜色在线改变
    基于JavaScript以及canvas实现输入颜色预览以及背景颜色变为输入颜色值的效果。输入框中默认值为黑色,下方画布显示该颜色。通过输入新的颜色值后,点击【显示颜色】按钮,画......
  • 前端成神之路-JavaScript高级第04天
    JavaScript高级第04天1.正则表达式概述1.1什么是正则表达式正则表达式(RegularExpression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表......