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 请求：

$.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和端口向目标地址发送请求。

前端使用proxy代理解决跨域的问题

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进行额外配置，语义不清晰