Axios

每日一问

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