VUE04_Promise的概述、常用API、静态方法、axios基于不同请求传参、拦截器、async/await用法(二)

简介: ④. axios介绍⑤. axios基础用法(get和delete)⑥. axios基础用法(post和put)

④. axios介绍


  • ①. 支持浏览器、node.js、Promise


  • ②. 自动转换JSON数据,能转换请求和响应数据


  • ③. 能拦截请求和响应(强大)


⑤. axios基础用法(get和delete)


  • ①. 通过传统的url 以 ? 的形式传递参数


  • ②. restful 形式传递参数


  • ③. 通过params 形式传递参数(方便)


 <script src="../js/axios.js"></script>
 <script src="../js/vue.js"></script>
 <script>
  //1. 发送get 请求
  //通过传统的url 以 ? 的形式传递参数
  axios.get('http://127.0.0.1:30021/staffSelect/list?page=1&&limit=10').then(response=>{
       //注意data属性是固定的用法,用于获取后台的实际数据
       console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
       console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
   });
   //2.发送get请求
   //restful 形式传递参数 http://127.0.0.1:30021//menu/get/{}
   axios.get('http://127.0.0.1:30021//menu/get/1').then(function(reponse){
       //Object { result: true, data: {…}, msg: "查询成功" }
       console.log(reponse.data);
   });
  //3. 通过params形式传递参数
   axios.get('http://127.0.0.1:30021/staffSelect/list',{
         params:{
             page:1,
             limit:10
     }
   }).then(response=>{
       //注意data属性是固定的用法,用于获取后台的实际数据
       console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
       console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
   });
 //4. axios delete 请求传参 传参的形式和 get 请求一样
 axios.delete('http://localhost:3000/axios', {
   params: {
       id: 111
   }
 }).then(rep=>{
     console.log(rep.data);
 });
 </script>


⑥. axios基础用法(post和put)


  • ①. 对于传统的方式我们需要使用new URLSearchParams()


  • ②. Post请求是json格式的传参


 <script>
    //通过选项传递参数(默认传递的是json格式的数据)
    //{uname:'lisi',pwd:123}
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    });
    //对于传统的方式我们需要创建一个URLSearchParams对象(application/x-www-form-urlencoded)
    //将参数append进去
    //传递参数的格式  uname=zhangsan&pwd=111 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function (ret) {
      console.log(ret.data)
    })
    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    })
    var vm = new Vue({
      el: '#app',
      data: {
      }
    });
  </script>
相关文章
|
11月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
748 204
|
11月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
553 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
前端开发 安全 JavaScript
Promise 这个新 API 真香!
本文首发于公众号【沉浸式趣谈】,探讨 ES2025 新特性 `Promise.try()` 的强大功能。该方法可将同步或异步函数统一包装为 Promise,解决同步错误捕获难题,简化代码逻辑。通过实际案例分析,展示其在 API 调用、混合任务链及文件操作中的应用优势。`Promise.try()` 让 Promise 使用更健壮、一致,是开发者工具箱的有力补充。更多技术分享,请访问我的博客 https://yaolifeng.com 或点赞、评论、转发支持!
311 13
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
713 155
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
804 155
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
532 162
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
513 1
|
9月前
|
人工智能 自然语言处理 测试技术
Apipost智能搜索:只需用业务语言描述需求,就能精准定位目标接口,API 搜索的下一代形态!
在大型项目中,API 数量庞大、命名不一,导致“找接口”耗时费力。传统工具依赖关键词搜索,难以应对语义模糊或命名不规范的场景。Apipost AI 智能搜索功能,支持自然语言查询,如“和用户登录有关的接口”,系统可理解语义并精准匹配目标接口。无论是新人上手、模糊查找还是批量定位,都能大幅提升检索效率,降低协作成本。从关键词到语义理解,智能搜索让开发者少花时间找接口,多专注核心开发,真正实现高效协作。
|
9月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。