每日一问
1、前端和后端交互数据方式?
2、原生ajax如何写?
3、有没有一个封装好的请求库使用?
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
一、axios基本使用
axios 是一个专门用于发送ajax请求的库
1、官网:http://www.axios-js.com/
2、特点
支持客户端发送Ajax请求
支持服务端Node.js发送请求
支持Promise相关用法
支持请求和响应的拦截器功能
自动转换JSON数据
axios 底层还是原生js实现, 内部通过Promise封装的
提示:这里可以添加本文要记录的大概内容:
提示:以下是本篇文章正文内容,下面案例可供参考
小结
1、什么是ajax?
一种前端异步请求后端的技术
2、ajax原理?
浏览器window接口的XMLHttpRequest
3、axios是什么?
基于原生ajax+Promise技术封装通用于前后端的请求库
二、获取数据
目标
获取所有图书信息
功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台
接口: 参考预习资料.md – 接口文档
引入: 下载axios, 引入后才能使用
import axios from 'axios';
export default {
methods: {
getAllFn() {
axios({
url: "/api/getbooks",//请求地址
method: "GET", // 默认就是GET方式请求,为了规范,请求方式必须要写!
}).then((res) => {
console.log(res);
});
}
}
}
三、传参
目标
查询图书信息
功能:点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
接口:参考预习资料.md – 接口文档
代码如下(示例):
<template>
<div>
<p>2. 查询某本书籍信息</p>
<input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
<button @click="findFn">查询</button>
<div>
</template>
import axios from 'axios';
export default {
data() {
return {
bName: "",
};
},
methods: {
findFn() {
axios({
url: "/api/getbooks",
method: "GET",
params: { // 都会axios最终拼接到url?后面
bookname: this.bName
}
}).then(res => {
console.log(res);
})
}
}
}
1、ajax如何给后台传参?
在url?拼接 – 查询字符串
在url路径上 – 需要后端特殊处理
在请求体 / 请求头 传参给后台
2、axios哪个配置项会把参数自动写到url?
后面 params
全局配置默认基地址
目标:配置基础地址, 统一管理
1、可以在官网看到axios的很多默认配置
2、修改请求url / 以后的请求都不用带前缀基地址了 – 运行时, axios的baseURL会自动拼在前
总结
提示:这里对文章进行总结:
1、想学习axios更多的知识应该去哪里?
官网多阅读, 多看多总结, 任何库和插件都是
2、axios如何配置基地址?
axios.defaults.baseURL