在async函数中使用axios

最新推荐文章于 2022-06-20 18:44:46 发布
最新推荐文章于 2022-06-20 18:44:46 发布
阅读量560 收藏
点赞数
分类专栏： 同步和异步 文章标签： 在async函数中使用axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Congnandaobei/article/details/93628881
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // 前端开发中异步代码最多的就是发请求
    async function main () {
      // axios({
      //   method: 'GET',
      //   url: 'http://localhost:3000/heros'
      // }).then(res => {
      //   console.log(res)
      // })
      try {
        const heroRes = await axios({
          method: 'GET',
          url: 'http://localhost:3000/heros'
          //这个地址是我本地的。
        })
        
        console.log(heroRes)

        const postRes = await axios({
          method: 'GET',
          url: 'http://localhost:3000/posts'
          //这个地址是我本地的。
        })

        console.log(postRes)
      } catch (err) {
        console.log('请求出错了', err)
      }
    }

    main()
  </script>
</body>
</html>
Congnandaobei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axios和(async,await)
m0_70521709的博客
05-09 151
console.log(ret.data) }) 2.2 restful 形式传递参数 axios.get(‘http://localhost:3000/axios/123’).then(function(ret){ console.log(ret.data) }) 2.3 通过params 形式传递参数 axios.get(‘http://localhost:3000/axios’, { params: { id: 789 } }).then(function(ret){ console.log(r
使用async await 封装 axios的方法
12-04
例如，以下是如何在Vue组件中使用`api.get`方法： ```javascript import { api } from 'common/js/api'; export default { data() { return { list: [], }; }, created() { this.getList(); }, methods: ...
浅谈Axios和(async/await)
Growing up Or Growing old
04-13 1119
await 也是一个修饰符，只能放在async定义的函数内。await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。通过 params 设置参数，实际开发中常用。通过 data 设置参数，data可以省略。async/await 是ES7提出的基于。的解决异步的最终方案。
async/await的基本用法
Mint周的文章
10-25 96
/* async/await 处理异步操作： async函数返回一个Promise实例对象 await后面可以直接跟一个 Promise实例对象 */ axios.defaults.baseURL = 'http:localhost:3000'; axios.get('adata').then(function(ret){ console.log(ret.data) }) async function qu...
axios和async / await的基本用法
前端、python爱好者
07-20 1万+
主要使用本地自建的cookie工具或者vue提供的vue-cookie以及element-ui框架和nprogress进度条模块，大家可以对照自己代码直接复制使用。为了我们的代码健壮性，因此本质上只要有.then()就得跟一个.catch()，至于finally()则看情况添加。这个时候我们可以直接使用 新增的语法糖 async 和await ，使用起来更加的舒服方便，代码看起来也更简洁。当然实际的开发项目中，如果我们使用了统一的请求模块，用 .then()取到正确的数据，.catch()捕获错误，
关于使用axios的一些心得技巧分享
08-30
5. **错误处理**：在axios中，错误处理通常在`catch`块中进行，或者通过响应拦截器。当请求失败时，错误对象包含了关于失败的原因，这可以帮助调试和优化应用程序。 以上就是在实际项目中使用axios时可能会用到的...
在vue中通过axios异步使用echarts的方法
08-28
因此，在此篇文章中，我们将在 Vue 项目中使用 Echarts，实现异步加载数据。 一、实现异步加载数据 首先，我们需要引入 Axios，並通过 npm 下载 Axios。然后，在 main.js 中引入 Axios 并注册： ``` import ...
解决Nuxt使用axios跨域问题
10-15
本篇文章将详细讲解如何在Nuxt.js项目中使用axios解决跨域问题。 首先，我们需要理解什么是跨域。跨域是指一个域下的资源请求另一个域下的资源，由于浏览器的安全策略，这种行为通常会被阻止。在Nuxt.js中，由于...
详解axios在vue中的简单配置与使用
11-30
在这个示例中，`fetch`函数封装了axios的post请求，返回Promise，方便在Vue组件内进行async/await处理。这样，每个API调用都会先经过请求拦截器和响应拦截器，确保了请求的统一管理和异常处理。 总结，axios在Vue中...
axios,async,promise,await的简单理解与使用
y516369的博客
06-20 1022
axios,async,promise,await的简单理解与使用
axios操作 和 async-await
交小新的博客
04-12 755
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 JS中原生提供了Ajax操作. 弊端: 操作特别的复杂 易用性较差. jQuery中的Ajax 封装了原生的JS Ajax 提高了开发的效率 Axios是VUE中默认支持的Ajax的请求的方式. Get-简单参数 /** * GET请求-简单参数的写法 * 需求: 根据ID查询数据 * URL: http://localhost:8090/axios/getUserBy
Axios、Promise、async、await、nextTick
长不大的大灰狼
01-09 1417
Axios、Promise、async、await、nextTick一、Axios1、基本使用2、axios API3、请求方法的别名4、并发5、创建实例6、实例方法7、在Vue项目中进行全局配置二、ES6 Promise 对象三、async和await四、nextTick 一、Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1、基本使用 GET请求： // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345
使用async await 封装 axios
weixin_34138139的博客
07-07 200
es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以建一个api.js文件,全局创建api实例. import axios from 'axios' const qs = require('qs') const api = { async get ...
AJAX、axios、async、跨域相关笔记
DespairA的博客
03-04 1474
一、前置知识 1.浏览器的调试面板中额network（网络）选项 记录发送的请求 2.headers 单击其中任意一个请求 右侧header中的response header是响应头，request header是请求头，记录请求的信息 3.querty string parameters对URL中的参数进行解析和格式化 4.其他的选项 preview 响应预览 response响应 initiator 请求链 timing 请求时长 cookie 浏览后...
async的使用
懒人改变世界
03-26 665
转自：http://www.jianshu.com/p/977b11cb61be 用过node.js 有时候一定会为js的异步问题感到头痛， 之前写过一篇博客是用递归解决异步问题的，node.js使用递归解决异步性问题 这次要给大家介绍的是 一个第三方库 async安装npm install async引用var async=require('async');基本语法解决多个无关函数的异步问题a
axios如何执行同步----async
yhr0322的博客
10-31 1万+
axios执行同步 **axios:**是一种异步请求的方式 ，通过回调函数的方式在请求中做的更多的是可控的功能， 简单介绍一下axios,有疑问的可以看我的博客里边有axios的详细介绍，以及一些个应用场景！！！ axios从入门到精通精解 https://blog.csdn.net/yhr0322/article/details/101977534 axios同步之async-----a...
axios 进行同步请求(async+await)
热门推荐
艾欢欢的博客
04-27 6万+
一般使用axios进行数据请求就是要使用异步请求，一些需求可以写在回调里面。 如果一定要同步的话，async+await 了解一下？ methods: { async funA(){ var res = await axios.post('') //这里的res就是axios请求回来的结果 } } ...
async和await配合axios使用
最新发布
07-28
在使用axios发送请求时，可以将其包装在一个async函数中，并使用await关键字等待请求的响应。下面是一个示例代码： ```javascript async function fetchData() { try { const response = await axios.get('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值