一、 前提了解：
服务器：负责存放和对外提供资源的电脑‘请求-处理-响应’
客户端：在上网过程中，负责获取和消费资源的电脑
URL：统一资源定位符，协议域名端口号
资源的请求方式：
1. get：获取服务器资源
2. post：向服务器提交数据
3. 其他：put修改、delete删除、fetch批量
二、 Ajax的使用
前端异步请求后端，XMLHttpRequest对象用于和服务器交换数据
实现网页与服务器之间的数据交互;局部刷新
场景：用户名检测 / 搜索提示 / 数据分页显示(跳转不刷新页面) / 数据的增删改查
2.1 jQuery中发起 Ajax 请求：
$.get / post(url,[data],[callback])
$.ajax (type,url,[data],[callback]) type默认get
$.get() ：用于获取数据
$.post()：用于提交数据
$.ajax()：既可以获取数据，又可以提交数据；
可以返回success、error、complete结果2.2 Postman测试工具：
测试GET：1. 选择请求方式，2. 填写URL地址，3. 填写参数，4. 点击Send发送，5. 查看响应结果
测试POST：1. 选择请求方式，2. 填写URL地址，3. 选择body面板勾选数据格式x-www，4. 填写发送数据，4. 点击Send发送，5. 查看响应结果
2.3 Ajax提交Form表单数据：
action属性：数据提交 URL 地址
target：-bank新窗口打开，self默认当前窗口打开
method：数据提交方式，get默认 / post
enctype：发送表单数据之前如何对数据进行编码
application/x-www-form-urlencoded默认; mulitipart/form-data上传文件
表单同步提交：表单提交后，页面发生跳转，页面之前的状态和数据会丢失
解决：表单采集数据，Ajax提交到服务器
监听表单提交事件：
$('#f1').submit(function () {})
$('#f1').on('submit', function () {})阻止表单默认提交行为：
$('#f1').submit(function (e) {
e.preventDefault()
})
$('#f1').on('submit', function (e) {
e.preventDefault()
})快速获取表单数据：
$('#form').serialize()
$('#form').serializeArray()
调用表单form的id名,获取表单值，表单值要设置name值三、 axios的使用
中文文档：axios中文文档链接，点击跳转
基于原生ajax+Promise技术封装通用于前后端的请求库。专注于网络数据请求的库，比XMLHttpRequest简单，比jQuery更加轻量化
安装命令：yarn add axios
导入命令：import axios from "axios";
axios 发起 get 请求：
axios.get('url', { params: { /*get参数*/ } }).then(callback).catch(function(error){ })
axios 发起 post 请求：
axios.post('url', { /*post 参数*/ }).then(callback)axios的二次封装（常用）：
// 封装 axios 请求模块
import axios from "axios";
import router from "@/router";
// axios.create 方法创建一个axios的实例
const request = axios.create({
baseURL: "/localhost", // 接口的基准路径,改成自己的项目基地址
});
// 请求拦截器：是否注入token
request.interceptors.request.use(
function (config) {
return config;
},
function (error) {
return Promise.reject(error);
}
);
// store文件中vuex和localstorage对token进行处理之后响应拦截器中统一处理 token 过期
// 处理流程：在axios拦截器中加入token刷新逻辑；用户token过期时，向服务器请求新的 token；旧token替换为新token；然后继续用户当前的请求
// 响应拦截器
request.interceptors.response.use(
function (response) {
return response;
},
async function (error) {
console.dir(error);
if (error.response && error.response.status === 401) {
// 校验是否有 refresh_token
const user = store.state.user;
if (!user || !user.refresh_token) {
router.push("/login");
return;
}
// 如果有refresh_token，则请求获取新的 token
try {
const res = await axios({
method: "PUT",
url: "/admin/waterMeter/login", // 改成自己的项目的登录地址
headers: {
Authorization: `Bearer ${user.refresh_token}`,
},
});
// 如果获取成功，则把新的 token 更新到容器中
console.log("刷新 token 成功", res);
store.commit("setUser", {
token: res.data.data.token, // 最新获取的可用 token
refresh_token: user.refresh_token, // 还是原来的 refresh_token
});
return request(error.config);
} catch (err) {
// 如果获取失败，直接跳转 登录页
console.log("请求刷线 token 失败", err);
router.push("/login");
}
}
return Promise.reject(error);
}
);
export default request;封装之后发起请求：
// export const login = (user) => {
// return request({
// url: '', // 接口地址
// method: 'POST', 'GET', // 请求方式
// // 如果参数通过请求体来发(post)，用data是请求体参数
// // 如果参数通过请求行来发(get)，用params是路径参数
// data: user
// })
// }四、 请求跨域
1. proxy代理:
本地向proxy代理服务器发送请求，proxy接收本地请求，转换为目标地址相同IP和端口向目标地址发送请求。
2. JSONP：
兼容性好，只支持 GET 请求，不支持 POST 请求
实现原理：<script> 标签不受同源策略影响；通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据
过程：定义一个js文件，通过script标签src引入，通过callback参数指定调用函数名；
JSONP利用script标签的src属性，跨域特性，和Ajax没有任何关系；
非同源接口要返回一个函数的调用形式，将来这个函数会在客户端当成js代码来执行
使用jQuery中封装的JSONP实现：动态创建再移除<script>标签 --
$.ajax({
url: ' ',
dataType: 'jsonp', // 代表我们要发起JSONP的数据请求
jsonp: 'callback', // 这个属性一般都不改的
jsonpCallback: 'abc', // 指定回调函数名，会调用同名函数
success: function (res) { }
})3. CORS：
优势：在服务端进行控制是否允许跨域，可自定义规则、支持各种请求方式；
缺点：不兼容某些低版本的浏览器、会产生额外的请求；
4. nginx反向代理：
思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰