vue + axios使用总结

之前很期望能做项目,看着别人做项目挺羡慕的,当自己做项目的时候就发现没有自己想象种的那么简单,这次做项目也有一段时间了,其实接触的时间长了就真的理解经常说的那句话了,语言是相同的。从最开始做项目的时候啥也看不懂,到现在开快发完已经有个大概的认识,总的来说还是学到了很多知识,现在总结总结。

一、知识点

1.页面初始化

在刚开始做的时候一直在想,为什么我们每次打开页面的时候就会显示内容,通过什么途径显示的,怎么没有项目C#语言里load那样的事件,对窗体进行加载显示出来,最后发现以下代码就起到了想load事件一样的功能。

①用法

直接在created中调在外面写好的方法。

//页面初始化时显示的内容

  created() {

    this.initApproval();

  }

 

 

 

2.请求后端

 

①后端地址 

var url =process.env.VUE_APP_BACKEND_URL + "/detail/selectApprovalDetail/22";

②请求方法

 this.$axios.get(url).then(

        response => {}

发送请求的时候有两种方法,分别是post和get,这两个请求有什么样的区别和联系就不阐述了。

更多详情请看:https://blog.csdn.net/yyp0304Devin/article/details/103099512

3.两个页面之间传递参数,一个页面传递,一个页面接受。

①传递

 //路由地址(带唯一标识一个参数id)

      this.$router.push({

        name: "approvalDetail",

        params: { id: this.typelist[index].id }

      });

②接收

 //接收initApproval界面传来的卡片id

    receiveData() {

      this.id = this.$route.params.id;

    },

4.监听

在输入内容或者其他操作时在写一个监听方法用来监听对象的值的变化,适应自己的要求。

 watch: {

    inputRefuseReason(maxlength) {

      if (maxlength.length >= 20) 

      this.$toast("输入内容不能超过20个字!");

    }

  },

 

 

二、Axios

在项目中用到了Axios,那么什么是axios,之间接触过ajax,它们有什么联系呢?

首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js是http客户端。

1.axios

①axios的作用

axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

特点

支持浏览器和node.js

支持promise

        能拦截请求和响应

        能转换请求和响应数据

        能取消请求

        自动转换JSON数据

        浏览器支持防止CSRF(跨站请求伪造)

promise是什么:是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。

promise的作用:Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。

promise的本质是什么:分离异步数据获取和业务

 

 

还有一个axios重要的知识点就是拦截器

②拦截器

在请求或响应被 then 或 catch 处理前拦截它们(拦截器可以做什么:在请求或者响应时拦截下来进行处理)

拦截器分为请求拦截器和响应拦截器

请求拦截器(interceptors.requst)是指可以拦截每次或指定HTTP请求,并可修改配置项。

响应拦截器(interceptors.response)可以在每次HTTP请求后拦截住每次或指定HTTP请求,并可修改返回结果项。

 

2.ajax

ajax非常常见的,应用场景也非常多,每当用户向服务器发送请求的时候它都会刷新页面,这个刷新是我们几乎看不见的,经常称为轻量级的。就像我们每次登录某个网站或者APP是,输入账号密码的时候都会去服务器查询,而在查询的时候我们还可以继续输入,所以也称为是异步的。

具体内容请看:https://zhuanlan.zhihu.com/p/33809782

发布了137 篇原创文章 · 获赞 55 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/yyp0304Devin/article/details/103751110