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>
相关文章
|
8月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
413 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
8月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
630 204
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
672 155
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
708 155
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
477 162
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
961 1
|
6月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
6月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
7月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。