Vuejs——前端学习日记（七）

最新推荐文章于 2023-02-13 20:40:07 发布
最新推荐文章于 2023-02-13 20:40:07 发布
阅读量355 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41815035/article/details/106755244
版权

Vuejs——前端学习日记（七）

axios

axios是一个异步请求的工具，与ajax很像。

了解axios

axios是基于promise对ajax的一种封装，ajax是对网页的一些数据进行局部刷新。
ajax为mvc服务，mvc是一种开发模式，m是数据模型，v是视图，c是控制器，用来控制视图来跳转，视图是给用户展示控制器端返回的数据渲染，也可以从视图发起请求回馈给控制器。
axios mvvm导致ajax不符合这个架构。

axios的基本使用

接口名请求方式请求参数
获取所有学生get无参
根据id获取学生getid string
获取所有学生post无参
根据名字获取学生postname string

使用默认方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/getAllstudent'
}).then(res => {
  	console.log(res);
})
</script>

可以通过在axios对象里加入method属性来确定请求方式是get还是post：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/getAllstudent',
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

使用axios发送get有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentById?id=1',
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

这种有参请求是将具体的参数id=1直接链接到url地址中，也可以用声明属性的方式来实现有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentById',
  	params: {
      id: '1'
    },
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

使用post方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/pGet',
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

post方式发送无参请求与get类似，只是method属性不同。
使用axios发送带有参数的post请求,params传递：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentByName',
  	params: {
      name: '张三'
    },
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

这种方式等同于明文查找，直接将params的内容拼接到url上，这样会暴露用户隐私，所以不推荐。
使用axios发送带有参数的post请求,data传递：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentByName',
  	data: {
      name: '张三'
    },
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

这种情况后台控制器接收到的name为null，因为axios使用post携带参数请求默认使用application/json。有三种解决方法：解决方式一：使用params属性进行数据传递（不推荐）；解决方式二：直接将data属性换为“name=张三”；解决方式三：服务器端给接收的参数加上@requestBody。

axios请求方式

axios的两种请求方式：get和post，除了使用上述的方法表示，还可以用比较简单的方法来表示。
使用axios.get方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.get发送有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.post发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.post('http://localhost:9999/student/student/pGet').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.post发送有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.post('http://localhost:9999/student/student/findStudentByName',"name=张三").then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

传递多个参数，每个参数间用&连接，如："name=张三&age=10"。
使用data传递数据，后台需要将axios自动转换的json数据转换为java对象，在对应的post方式有参函数中将参数添加@requestBody注解就好。

axios并发请求

axios的并发请求，就是当两个或多个请求都回来后再一并作处理。
在这里用到的是axios.all()方法：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.all([
  	axios.get('http://localhost:9999/student/student/getAllStudent'),
  	axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
]).then(res => {	//请求成功相应的是一个数组
  	console.log(res[0])
  	console.log('--------')
  	console.log(res[1])
}).catch(err => {
  	console.log(ree)
})
</script>

在基本的并发请求方法中，请求成功的话得到的res是一个数组，里面存放着每一个请求的响应，通过spread将参数直接进行分割，就不需要通过数组下标进行截取了：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.all([
  	axios.get('http://localhost:9999/student/student/getAllStudent'),
  	axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
]).then(
	axios.spread((res1,res2) => {
    console.log(res1),
    console.log(res2)
  })	
).catch(err => {
  	console.log(ree)
})
</script>

axios的全局配置

全局配置的思路：在axios的url属性里，前面的http://localhost:999/student/student/地址都是一样的，就只有后面的地址不一样，全局配置就是想把前面的共同地址给提取出来。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.defaults.baseURL='http://localhost:9999/student/student';//配置全局属性
	axios.defaults.timeout=5000;//超时时间
	axios.get('getAllStudent').then(res => { //在全局配置基础上去网络请求
    console.log(res);
  });
	axios.post('pGet').then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err);
  })
</script>

axios实例

创建axios实例，可以传入属于这个实例的配置参数。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  let newVar = axios.create({
    baseURL: 'http://localhost:9999/student/student',
    timeout: 5000
  });//创建axios实例
	newVar({
    url: 'getAllStudent'
  }).then(res => {
    console.log(res)
  })
</script>

axios拦截器

axios提供了两类拦截器，request请求方向和response响应方向的。请求可以分为成功请求和失败请求。

拦截器作用：用于在网络请求的时候，在发起请求或者响应时对操作进行响应的处理

功能：发起请求时可以添加网页加载的动画、强制登录；响应时可以进行响应的数据处理
请求拦截器：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.interceptors.request.use(config => {
  	console.log('进入请求拦截器');
  	console.log(config);
  	return config;	//不能只拦截不放行，需要添加return放行
},err => {	//拦截器里没有catch
  	console.log("请求失败");
  	console.log(err)
})
	
axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
    console.log(res);
  })
</script>

响应拦截器：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.interceptors.response.use(config => {
  	console.log('进入响应拦截器');
  	console.log(config);
  	return config.data;	//不能只拦截不放行，需要添加return放行
},err => {	//拦截器里没有catch
  	console.log("响应失败");
  	console.log(err)
})
	
axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
    console.log(res);
  })
</script>

axios在Vue项目中的模块封装

在Vue项目中不可能只有一个网络请求，在面对多个请求时都先创建一个axios实例会非常的麻烦，而且在项目更新迭代的过程中也会遇到很多问题。
axios在Vue中的模块封装一共有四种方式，前三种方式为第四种方式的铺垫，建议使用第四种。

//封装位置	文件位置：./network/request/request.js
import axios from 'axios'
export function request (config, success, fail) {
    axios({
        url: config
    }).then(res => {
        success(res)
    }).catch(err => {
        fail(err)
    })
}
//调用位置
import {request} from './network/request/request'
request('http://localhost:9999/student/student/getAllStudent', res => {
  console.log(res)
}, err => {
  console.log(err)
})

//封装位置
import axios from 'axios'
export function request (config) {
    axios.defaults.baseURL = 'http://localhost:9999/student/student';
    axios(config.url).then(
        res => {
            config.success(res);
        }
    ).catch(err => {
        config.fail(err);
    })
}
//调用者位置
import {request} from './network/request/request'
request({
  url:'getAllStudent',
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

//封装位置
import axios from 'axios'
export function request (config) {
    let newVar = axios.create({
        baseURL: 'http://localhost:9999/student/student',
        timeout: 5000
    });
    return new Promise((resolve, reject) => {
        newVar(config).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err)
        })
    })
}
//调用者位置
import {request} from './network/request/request'
request({
  url: 'getAllStudent'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err)
})

//封装位置
import axios from 'axios'
export function request (config) {
    let newVar = axios.create({
        baseURL: 'http://localhost:9999/student/student',
        timeout: 5000
    });
    return newVar(config);
}
//调用者位置

学习来源：bilibili.com/video/BV1QA411b7TR

Tony狗
关注
Vuejs——前端学习日记（一）
qq_41815035的博客
06-06 568
Vuejs——前端学习日记（一）认识Vuejs为什么学习Vuejs？Vue是一个渐进式的框架，有很多特点和高级功能Vuejs的安装Vuejs项目初创建Hello Vuejs 认识Vuejs 为什么学习Vuejs？ 原有的项目可以使用Vue进行重构； 项目可以使用Vue的技术栈； 目前市场上前端对Vue或多或少有需求； Vuejs非常火，是前端必备技能。 Vue是一个渐进式的框架，有很多特点和高级功能 Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。V
Vuejs——前端学习日记（五）
qq_41815035的博客
06-11 176
Vuejs——前端学习日记（五）注册页面 注册页面 在创建Vue项目后，收到了朋友的已经写好登录界面的src文件夹，将本地刚创建的项目里的src文件夹替换掉，再制作一个注册页面。 首先在src文件夹里创建一个register.vue的文件，用于注册页面的创建。之后在原login.vue文件中添加一个按钮，用于从登陆界面跳转到注册界面： <el-button type="primary" @click="toregister" style="width:180px" round>去注册</e
Vue知识点整理（一）基础知识
Chen_leilei的博客
12-04 1776
1.v-show 如果为false 只是添加了一个display=true的描述，没有被真正的删除。 2.v-if 如果为false 是真正的在dom节点下删除这个节点 3. 数组更新检测 push() pop() split(),sort,reverse(),unshilf(),shilf()都可以影响原数组 filter(),concat(),slice(),map()新数组替换旧的数组，原数组不会改变，视图不会刷新 通过索引值来修改原数组的方式 原数组收到影响，但视图不会刷新 可以使用 datalis
Vue简单介绍和操作指南
weixin_45581495的博客
07-16 231
Vue解决的问题是:逻辑部分和赋值部分进行分离 Vue分为: 视图部分:负责页面渲染，主要由HTML+CSS构成。 脚本部分:：负责业务数据模型（Model）以及数据的处理逻辑。 let vm = new Vue({ 选项列表; }); 选项列表 el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。 数据绑定 在视..
vue传值为空问题
jjy8040的博客
06-18 4538
vue解决组件传值异步问题：https://blog.csdn.net/qq_15243963/article/details/80134142 vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决 附demo：https://www.jianshu.com/p/4450b63a27fe 由于vue传值时数据会更新，在一些时候传递的值会出现为空的情况，且created生命周期只...
vue 中then后的返回值
wzwzwz555的博客
10-28 1万+
Promise 中处理的是异步调用，异步调用是非阻塞式的，在调用的时候并不知道它什么时候结束，也就不会等到他返回一个有效数据之后再进行下一步处理 可以使用async和await来得到我们的返回值 在vue中的函数加上async async del(id){ var that=this var params={ ...
Vuejs——前端学习日记（四）
qq_41815035的博客
06-10 244
Vuejs——前端学习日记（四）Vue CLI Vue CLI 在写简单的Vue Demo程序，不需要Vue CLI；在开发大型项目的时候，是需要，且必然需要使用Vue CLI的。因为在开发大型应用时，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果都要手动完成这些工作会非常低效，所以通常会使用一些脚手架工具来完成这些事。 CLI是Command-Line Interface，命令行界面，俗称脚手架。Vue CLI是一个官方发布的vue.js项目脚手架，使用vue-cli可以快速搭建V
Vuejs——前端学习日记（六）
qq_41815035的博客
06-13 227
Vuejs——前端学习日记（六）对注册页面增加一点细节用户登录和token验证 对注册页面增加一点细节 之前在注册页面中实现了基本的注册邮箱、密码及确认密码三个输入框以及注册按钮和跳转至登录界面的链接，这次在三个输入框中加入提示功能，效果如下： 当并未输入邮箱或密码时： 当输入的密码与确认密码不一致时： 只有当正确输入邮箱、密码和确认密码后才不会显示： 这里的功能是需要在el-form控件里加入:rules指令来规定规则： <el-form ref="registerForm"
管理系统系列--vuejs Database Manager数据管理系统——前端.zip
最新发布
02-25
Vue.js 是一个轻量级的渐进式JavaScript框架，它以其简洁的API和易于学习的特性而受到开发者喜爱。在本项目中，Vue.js 被用来构建整个前端应用，提供组件化开发、状态管理和响应式数据绑定等功能。Vue.js 的虚拟DOM...
vue中的.then()与.catch()
MyHappinessIsU的博客
09-20 2万+
catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch。
【js】get请求和post请求
逆风飞翔的代码狗
07-24 700
get请求和post请求 它们都是用来路由跳转，提交请求数据的，在页面调转的时候可以传递参数，只是传递参数的形式和位置都不相同 比较原生的有 fetch（url：’’，method） .then(res=>res.json()).then(res=>console.log(res)) 后续的axios、小程序的flyio都可以发送相应的请求 get请求和post请求的区别： 1.请求方式： get传参是直接在地址栏后传递，（明文传递） post请求一般用于传输比较贵重的信息，需要设置请求头 2.
Vue那些小坑
weixin_45499040的博客
01-09 171
身为后端程序袁的我经常后遇到Django与vue交互时的一些小问题:小白适用 现在就来说说哪些坑 想在vue中展示图片最好是把图片文件夹放在static下 Vue端 <template> <div align="center"> <button @click="show('人工智能')">人工智能</button> # 点击事...
Vue this.$confirm之后.then()中全局变量undefined
z332302638的博客
05-20 1621
Vue this.$confirm之后.then()中全局变量undefined 我的 choose_index 是一个全局当前选中行索引，但是在$confirm()之后打印到的就是undefined，本人水平有限，在du上没找到啥会用的好方法，就又重新定义了一个局部变量 给着急用的伙伴一点儿灵感， 也征集一下好方法 谢谢！ ...
前端对象类型的数组，传到后端转换为实体
DASHACHUN的博客
02-13 125
js向后端传对象数组
前端vue.js学习笔记（一）
明月寄天涯的博客
08-27 814
什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，...
vue--数据请求
weixin_45409451的博客
09-23 227
vue–数据请求 axios: 1.静态请求： getStatic () { ​ axios({ ​ url: './mock/data.json', ​ method: 'GET' ​ }).then( *res* => console.log( res )) ​ ...
vue中的then方法
热门推荐
可达鸭的博客
07-10 4万+
.then((data)=>{ })里的data是指接口成功返回的数据,包含请求头,请求体,等信息; 这里的then()方法有两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,另一个是失败的方法,以及失败的数据,第二个可选, <script> new Promise((resolve, reject) =>{ setTimeout(() =>{ //成功的时候调用resolve resolve('成功data')
vue常见问题（一）无法识别$http
baizaozao的博客
09-30 1万+
问题描述vue.esm.js?71e4:479 [Vue warn]: Error in created hook: "ReferenceError: $http is not defined"found in---> <MainSection> at D:\vue\Cnodejs\test\VueCnodeJs\src\components\MainSec.vue <App> at
vue 使用axios请求数据控制台有返回接口数据，但是在.then中打印res.data为undefined...
weixin_30853329的博客
07-30 1万+
prveiw 有返回json数据，但是再.then里打印的res却是undefined。 再网上找了很多解决provisional headers are shown 的方法。都没有用！ （有很多种可能导致Request Headers 出现这个问题） 后来就把axios换成了resource, 就解决了 查了一些资料总结了下axios和resource...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值