首页 > 其他分享 >axios 进行同步请求(async+await+promise)

axios 进行同步请求(async+await+promise)

时间:2023-01-15 00:23:31浏览次数:51  
标签:异步 axios console log await promise async

axios 进行同步请求(async+await+promise)

遇到的问题介绍

将axios的异步请求改为同步请求
想到了async 和await、Promise

axios介绍

Axios 是一个基于 promise 的 HTTP 库,它支持 Promise API。

普通常见的请求

axios.post('getsomething').then(
    res => {
        // 进行一些操作
    }
)

async 和 await

而 async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思,而 await 是 async wait的简写,即异步等待。

所以从语义上就很好理解 async 用于声明一个 函数 是异步的,而await 用于等待一个异步方法执行完成。
那么想要同步使用数据的话,就可以使用 async+await 。

// 假设这是我们要请求的数据
function getSomething(n) {
    return new Promise(resolve => {
        // 模拟1s后返回数据
        setTimeout(() => resolve(222), 1000);
    });
}

function requestSomething() {
    console.log(111);
    getSomething().then(res => console.log(res));
    console.log(333);
}
requestSomething() //这个时候会输出 111,333,222

// 如果想要等数据返回后再执行后面的代码,那么就要使用 async/await
async function requestSomething() {
    console.log(111);
    // 这时something会等到异步请求的结果回来后才进行赋值,同时不会执行之后的代码
    const something = await getSomething();
    console.log(something)
    console.log(333);
}
requestSomething() //这个时候会输出 111,222,333

 

标签:异步,axios,console,log,await,promise,async
From: https://www.cnblogs.com/yayuya/p/17052891.html

相关文章

  • Vue中的async和await【reggie_take_out】
    https://blog.csdn.net/G_Z_X/article/details/123535642https://gitee.com/yub4by/my-reggie-take-outresources/backend/page/food/list.htmlmethods:{......
  • day08-Axios
    Axios1.基本说明Axios是一个基于promise的网络请求库,作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生n......
  • axios 处理响应( 流文件或 json)
    今天遇到一前端问题。axios导出后台xls文件出现乱码。多会儿没写发现前端了,发现是【没指定响应类型时,axios默认把响应内容包成字符串,即type(res.data)='string'】,......
  • 类型“AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>”
    背景使用TS封装axios,在请求拦截器里添加Authorization携带Token:config.headers.Authorization=`Bearer${token}`TS报错:axios版本:1.2.2解决1.2.2版本的AxiosHea......
  • NET-async-await是否会创建新线程
    title:.NETasync/await是否会创建新线程date:2022-12-0610:36:46tags:-.NET先上结论CPU密集型操作,比如计算,如果不使用Task,ThreadPool、Thread,则不会创建新线程......
  • Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
    转载请注明出处:1.Promise的then方法使用then方法是 Promise中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他......
  • ES6 中 Promise对象使用学习
    转载请注明出处:Promise 对象是JavaScript的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步......
  • axios拦截器携带token_1
    目前在研究一个数据管理平台的前后端分离项目,使用axios拦截器获取用户登录后存储在localsession的token值,结果发现在浏览器的network请求标头中并没有token的信息。......
  • async顶层await
    20.async函数-含义-《阮一峰ECMAScript6(ES6)标准入门教程第三版》-书栈网·BookStackES2017标准引入了async函数,使得异步操作变得更加方便。async函......
  • VUE3 AXIOS 封装
    网上找了很多AXIOS的封装但是都不是很满意,后来参考其他人的实现做了改动后特分享出来http.ts文件封装importtype{AxiosRequestConfig,AxiosResponse}from'axios......