Vue 网络处置处罚 - axios 异步哀求的利用，哀求响应拦截器（最佳实践） ...

目录
一、axiox
1.1、axios 简介
1.2、axios 基本利用
1.2.1、下载焦点 js 文件.
1.2.2、发送 GET 异步哀求
1.2.3、发送 POST 异步哀求
1.2.4、发送 GET、POST 哀求最佳实践
1.3、哀求响应拦截器
1.3.1、拦截器表明
1.3.2、哀求拦截器的利用
1.3.3、响应拦截器的利用
1.3.4、拦截器在 Vue 脚手架中的利用（最佳实践）

---

一、axiox

---

1.1、axios 简介

axios 用来在前端页面发起一个异步哀求，哀求之后页面不动，响应回来刷新局部.
   1.为什么不利用 ajax 呢？
  官方：在 jQuery 中推荐利用 ajax 技能， Vue 内里不推荐利用 jQuery 框架，因此 Vue 更推荐利用 axiox 异步哀求库（axios并不是 vue 官方库）.
   2.axios 特性
  

• 可以从浏览器中创建 XMLHttpRequests
  
• 可以从 node.js 中创建 http 哀求.
  
• 支持 Promise API.
  
• 支持拦截哀求和响应.
  
• 转换哀求数据和响应数据.
  
• 取消哀求.
  
• 自动转换 JSON 格式数据.
  
• 客户端支持防御 XSRF.
  

1.2、axios 基本利用

1.2.1、下载焦点 js 文件.

a）下载一

1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

复制代码

  Ps：建议提前下载下来，放到一个 js 文件夹中，需要的利用引用即可（方便不联网利用）.
  b）下载二
如果利用脚手架，可以直接通过如下命令下载：

1. npm install axios

复制代码

1.2.2、发送 GET 异步哀求

比方对 http://localhost:8080/user/login?username=cyk&password=1111 发送 get 哀求.
   Ps：通过 get 哀求发送哀求中，携带的参数不会封装成 JSON 格式.
  前端代码如下：

1.                     axios.get("http://localhost:8080/user/login?username=cyk&password=1111")
2.                         .then(function (success) { //success 是自定义响应的参数名
3.                             //返回成功的响应
4.                             console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
5.                             console.log(success.data);
6.                         }).catch(function (error) { //error 是自定义的响应参数名
7.                             //返回失败的响应(例如，状态码为 403、500......)
8.                             console.log(error);
9.                         })

复制代码

• then：表示返回成功的响应需要执行的方法.
  
• catch：捕获错误的响应，执行对应的方法.
  

后端代码如下：

1. @RestController
2. @RequestMapping("/user")
3. public class UserController {
5.     @RequestMapping("/login")
6.     public String login(String username, String password) {
7.         if(!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
8.             return "账号或密码错误，登录失败";
9.         }
10.         if(username.equals("cyk") && password.equals("1111")) {
11.             return "登录成功";
12.         }
13.         return "账号或密码错误，登录失败";
14.     }
16. }

复制代码

前端发送响应后，效果如下：

表明：

• CORS 就是解决跨域题目的办法（这里出现了跨域题目，系统给你提示解决办法）.  因为是前端通过 Live Server 插件打开，自动分配 5500 端口，也就意味着，你的哀求是从 5500 端口发出，而后端吸收响应却是 8080 端口，这导致了跨域题目（浏览器克制这个操作）
  
• 由于响应是错误的，因此被 axios 的 catch 捕获到，通过 console.log 显示在控制台上.
  

在微服务项目中，就需要通过 Gataway 来解决.  当前为了方便演示，利用 Spring Boot 处置处罚，因此只需要在 controller 层上加  @CrossOrigin 注解即可解决跨域.
添加注解后后，重启后端服务，重新发送哀求，效果如下：

可以看到前端吸收到的响应是一个 json 格式的响应.

1.2.3、发送 POST 异步哀求

比方对 http://localhost:8080/user/login 发送 POST 哀求，携带 JSON 格式参数（axios 自动转化）：{ "username"="cyk", "password"='1111"}.
前端代码如下：

1.                     axios.post("http://localhost:8080/user/login", { username: "cyk", password: "1111" })
2.                         .then(function (success) {
3.                             //返回成功的响应
4.                             console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
5.                             console.log(success.data);
6.                         }).catch(function (error) {
7.                             //返回失败的响应(例如，状态码为 403、500......)
8.                             console.log(error);
9.                         })

复制代码

后端吸收的时间，就要创建一个对应的实体类，并加上 @RequestBody 注解来吸收 JSON 格式数据.

1. @Data
2. public class Userinfo {
4.     private String username;
5.     private String password;
7. }

复制代码

1. @RestController
2. @RequestMapping("/user")
3. @CrossOrigin
4. public class UserController {
6.     @RequestMapping("/login")
7.     public String login(@RequestBody Userinfo userinfo) {
8.         if(userinfo == null || !StringUtils.hasLength(userinfo.getUsername())
9.                 || !StringUtils.hasLength(userinfo.getPassword())) {
10.             return "账号或密码错误，登录失败";
11.         }
12.         if(userinfo.getUsername().equals("cyk") && userinfo.getPassword().equals("1111")) {
13.             return "登录成功";
14.         }
15.         return "账号或密码错误，登录失败";
16.     }
18. }

复制代码

发送哀求后，效果如下：

1.2.4、发送 GET、POST 哀求最佳实践

通过上述方式，实现了 发送 GET 和 POST 哀求，观察仔细的小伙伴会发现，每发送一个哀求就需要写一次 哀求的 ip 和 端口号，耦合度太高，后期一旦要跟换服务器的 ip 和端口号，所有地方都需要更改.
因此我们可以先创建好一份 axios 实例，将 服务器的 ip 和 port 提前写好，后期需要发送哀求的时间再通过这里实例发送对应的路由即可.
具体的通过 axios.create({}) 来出创建实例，传入的是一个对象，对象中的参数有很多，我们只需要知道两个最常用的即可.

• baseURL：指定哀求的目的服务器 ip 和 port.
  
• timeout：超时时间（单元是 ms），高出时间没有得到响应，就会直接报超时错误.
  

示比方下：

1.         let axiosInstance = axios.create({
2.             baseURL: "http://localhost:8080",
3.             timeout: 5000
4.         });
6.         let app = new Vue({
7.             el: "#app",
8.             methods: {
9.                 httpGet() {
10.                     axiosInstance.get("/user/login?username=cyk&password=1111")
11.                         .then(function (success) { //success 是自定义响应的参数名
12.                             //返回成功的响应
13.                             console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
14.                             console.log(success.data);
15.                         }).catch(function (error) { //error 是自定义的响应参数名
16.                             //返回失败的响应(例如，状态码为 403、500......)
17.                             console.log(error);
18.                         })
19.                 },
20.                 httpPost() {
21.                     axiosInstance.post("/user/login", { username: "cyk", password: "1111" })
22.                         .then(function (success) {
23.                             //返回成功的响应
24.                             console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
25.                             console.log(success.data);
26.                         }).catch(function (error) {
27.                             //返回失败的响应(例如，状态码为 403、500......)
28.                             console.log(error);
29.                         })
30.                 }
31.             }
32.         });

复制代码

  Ps：另有其他哀求范例，哀求格式和 POST 险些一样.  除了 DELETE 哀求和 GET 险些一样，一般通报的参数只有 id（后端根据 id 删除信息）.
  
1.3、哀求响应拦截器

1.3.1、拦截器表明

用来将 axios 中公共参数，响应举行同一处置处罚，淘汰 axios 发送哀求时大概吸收响应时代码的冗余.

1.3.2、哀求拦截器的利用

哀求拦截器：比方在微服务架构中，我们常常利用 Token 令牌作为用户身份认证标识，也就意味着，前端发送的每个哀求中都需要在 header 中添加 Token，这就需要利用 哀求拦截器 做同一处置处罚.
这里我们打印出来看看哀求拦截器，拦截了哪些东西：

1.         //创建统一的实例
2.         let axiosInstance = axios.create({
3.             baseURL: "http://localhost:8080",
4.         });
6.         // axios.interceptors.request.use 这里不使用这种单一创建的方法，而是使用统一的实例，如下
8.         //请求拦截器
9.         axiosInstance.interceptors.request.use(function (config) { // 做项目建议还是用箭头函数：(config) => {} ，属于懒汉加载，提高速度
10.             //自定义参数名，拦截下来的是请求的配置
11.             console.log(config);
12.             return config; //这里必须要返回这个参数! 否则报错!
13.         });
15.         let app = new Vue({
16.             el: "#app",
17.             methods: {
18.                 httpGET() {
19.                     axiosInstance.get("/user/sayHi")
20.                         .then(function (success) {
21.                             console.log(success.data);
22.                         });
23.                 }
24.             }
25.         });

复制代码

后端代码如下：

1.     @RequestMapping("/sayHi")
2.     public String sayHi(String token) {
3.         if(StringUtils.hasLength(token)) {
4.             System.out.println(token);
5.         }
6.         return "hello!";
7.     }

复制代码

效果如下：

可以看到，我们通过 哀求拦截器，在哀求发到服务器之间，修改配置.
比方将哀求拦截下来，在 url 末了加上 token 参数.

1.         axiosInstance.interceptors.request.use(function (config) {
2.             console.log(config);
3.             if (config.url.indexOf("?") == -1) {
4.                 // url 后面没有设置参数. 添加参数时注意加上 "?"
5.                 config.url += "?token=1234";
6.             } else {
7.                 config.url += "&token=1234";
8.             }
9.             return config;
10.         });

复制代码

效果如下：

1.3.3、响应拦截器的利用

响应拦截器：对后端发来的所有响应举行拦截，举行 同一处置处罚.
比方可以对错误的响应（catch）举行同一的处置处罚.

1.         axiosInstance.interceptors.response.use(function (response) { //自定义响应参数名
2.             console.log(response);
3.             if (response.status == 500) {
4.                 alert("服务器出现错误");
5.             }
6.             //其他错误处理...
7.             return response; //这里必须返回 response，否则报错
8.         });

复制代码

效果如下：

   Ps：有了同一响应异常的同一处置处罚之后，axios 中的 catch 部分就可以省略不写了.
  
1.3.4、拦截器在 Vue 脚手架中的利用（最佳实践）

在 vue 脚手架中，按照尺度开发方式，会在 src 目录下创建一个 utils 文件夹，然后在这个文件夹下创建一个 request.js 文件，专门用来封装 axios 实例 和 拦截器. 
如下代码：

1. import axios from 'axios'
3. //构建统一 axios 实例
4. const instance = axios.create({
5.     baseURL: "http://localhost:8060",
6.     timeout: 5000
7. });
9. instance.interceptors.request.use(config => {
10.     //加入 Token 数据...
11.     //例如: 将 Token 从 localStorage 中取出来，加入到请求头中
12.     let username = localStorage.getItem("username");
13.     let token = localStorage.getItem("token");
14.     //2.将 用户名 和 token 添加到 config 中
15.     config.headers.set("username", username);
16.     config.headers.set("token", token);
18.     console.log("请求拦截器");
19.     return config;
20. });
22. instance.interceptors.response.use((success => {
23.     //业务逻辑处理...
24.     console.log("成功：响应拦截器");
25.     return success;
26. }), error => {
27.     //业务逻辑处理...
28.     //例如：
29.     if (error.response.status == 403) {
30.         //跳转主页面
31.         router.push({ name: "Login" });
32.         alert("很抱歉，您没有权限，请登录！");
33.     }
35.     //将异常传递给下一个处理
36.     return Promise.reject(error);
37. })
39. // //暴露 instance 实例对象(这样在其他地方就可以直接使用 instance)
40. export default instance;

复制代码

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