Ajax 和 axios 调用接口的使用

目次
一、 前提相识
二、 Ajax的使用
  2.1 jQuery中发起 Ajax 请求
  2.2 Postman测试工具
  2.3 Ajax提交Form表单数据
监听表单提交变乱
阻止表单默认提交行为
快速获取表单数据
三、 axios的使用
四、 请求跨域
JSONP
CORS
nginx反向代理

---

一、 前提相识：

服务器：负责存放和对外提供资源的电脑‘请求-处理惩罚-响应’
客户端：在上网过程中，负责获取和消费资源的电脑
URL：同一资源定位符，协议域名端口号
资源的请求方式：
  1. get：获取服务器资源
  2. post：向服务器提交数据
  3. 其他：put修改、delete删除、fetch批量
二、 Ajax的使用

前端异步请求后端，XMLHttpRequest对象用于和服务器互换数据
实现网页与服务器之间的数据交互;局部革新
场景：用户名检测 / 搜索提示 / 数据分页显示(跳转不革新页面) / 数据的增删改查  
  2.1 jQuery中发起 Ajax 请求：

1. $.get / post(url,[data],[callback])
2. $.ajax (type,url,[data],[callback])  type默认get
4. $.get() ：用于获取数据
5. $.post()：用于提交数据
6. $.ajax()：既可以获取数据，又可以提交数据；
7.            可以返回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提交到服务器
监听表单提交变乱：

1. $('#f1').submit(function () {})
2. $('#f1').on('submit', function () {})

复制代码

阻止表单默认提交行为：

1. $('#f1').submit(function (e) {
2.   e.preventDefault()
3. })
5. $('#f1').on('submit', function (e) {  
6.    e.preventDefault()
7. })

复制代码

快速获取表单数据：

1. $('#form').serialize()
2. $('#form').serializeArray()
3. 调用表单form的id名,获取表单值，表单值要设置name值

复制代码

三、 axios的使用

中文文档：axios中文文档链接，点击跳转
基于原生ajax+Promise技能封装通用于前后端的请求库。专注于网络数据请求的库，比XMLHttpRequest简朴，比jQuery更加轻量化
安装命令：yarn add axios
导入命令：import axios from "axios";

1. axios 发起 get 请求：
2. axios.get('url', { params: { /*get参数*/ } }).then(callback).catch(function(error){ })
4. axios 发起 post 请求：
5. axios.post('url', { /*post 参数*/ }).then(callback)

复制代码

axios的二次封装（常用）：

1. // 封装 axios 请求模块
2. import axios from "axios";
3. import router from "@/router";
5. // axios.create 方法创建一个axios的实例
6. const request = axios.create({
7.   baseURL: "/localhost", // 接口的基准路径,改成自己的项目基地址
8. });
10. // 请求拦截器：是否注入token
11. request.interceptors.request.use(
12.   function (config) {
13.     return config;
14.   },
15.   function (error) {
16.     return Promise.reject(error);
17.   }
18. );
19. // store文件中vuex和localstorage对token进行处理之后响应拦截器中统一处理 token 过期
20. // 处理流程：在axios拦截器中加入token刷新逻辑；用户token过期时，向服务器请求新的 token；旧token替换为新token；然后继续用户当前的请求
21. // 响应拦截器
22. request.interceptors.response.use(
23.   function (response) {
24.     return response;
25.   },
26.   async function (error) {
27.     console.dir(error);
28.     if (error.response && error.response.status === 401) {
29.       // 校验是否有 refresh_token
30.       const user = store.state.user;
31.       if (!user || !user.refresh_token) {
32.         router.push("/login");
33.         return;
34.       }
35.       // 如果有refresh_token，则请求获取新的 token
36.       try {
37.         const res = await axios({
38.           method: "PUT",
39.           url: "/admin/waterMeter/login", // 改成自己的项目的登录地址
40.           headers: {
41.             Authorization: `Bearer ${user.refresh_token}`,
42.           },
43.         });
45.         // 如果获取成功，则把新的 token 更新到容器中
46.         console.log("刷新 token  成功", res);
47.         store.commit("setUser", {
48.           token: res.data.data.token, // 最新获取的可用 token
49.           refresh_token: user.refresh_token, // 还是原来的 refresh_token
50.         });
51.         return request(error.config);
52.       } catch (err) {
53.         // 如果获取失败，直接跳转 登录页
54.         console.log("请求刷线 token 失败", err);
55.         router.push("/login");
56.       }
57.     }
59.     return Promise.reject(error);
60.   }
61. );
63. export default request;

复制代码

封装之后发起请求：

1. // export const login = (user) => {
2. //   return request({
3. //     url: '', // 接口地址
4. //     method: 'POST', 'GET', // 请求方式
5. //     // 如果参数通过请求体来发(post)，用data是请求体参数
6. //     // 如果参数通过请求行来发(get)，用params是路径参数
7. //     data: user
8. //   })
9. // }

复制代码

四、 请求跨域

1. proxy代理:

本地向proxy代理服务器发送请求，proxy接收本地请求，转换为目标地点相同IP和端口向目标地点发送请求。
前端使用proxy代理解决跨域的标题
2. JSONP：

兼容性好，只支持 GET 请求，不支持 POST 请求
实现原理：<script> 标签不受同源策略影响；通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据
过程：定义一个js文件，通过script标签src引入，通过callback参数指定调用函数名；
JSONP利用script标签的src属性，跨域特性，和Ajax没有任何关系； 
非同源接口要返回一个函数的调用形式，未来这个函数会在客户端当成js代码来执行

1. 使用jQuery中封装的JSONP实现：动态创建再移除<script>标签 --
2. $.ajax({
3.   url: '   ',
4.   dataType: 'jsonp',      // 代表我们要发起JSONP的数据请求
5.   jsonp: 'callback',      // 这个属性一般都不改的
6.   jsonpCallback: 'abc',   // 指定回调函数名，会调用同名函数
7.   success: function (res) { }
8. })

复制代码

3. CORS：

优势：在服务端进行控制是否允许跨域，可自定义规则、支持各种请求方式；
缺点：不兼容某些低版本的欣赏器、会产生额外的请求；
4. nginx反向代理：

思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清楚


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。