Vue3-使用axios发起网络请求

即使是小型项目也会涉及到请求后端API，除非你的网站展示的是一些不需要维护的静态数据，第三篇文章我们来给Vue项目搞上axios。
  

• 何为Axios ？请看官方对Axios的描述，传送门:官方文档
  

   Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
  

• 如何安装Axios, 这部分我使用了几个不同版本的node都没有报错，兼容性还是不错的。
  

1.         yarn add axios

复制代码

• 在本篇文章中我们会讲解如何封装网络请求和全局实例化axios，官网的实例都是在单个文件中局部实例化axios，在项目上使用不多。
  

   按照之前的文章操作成功后，还需要在你的项目src目录下新建api文件夹
  
4. api.js是什么？这里面封装了所有的API请求，可以指定是否有参数，指定请求的类型是GET、POST、DELETE还是PUT

1. import http from './http.js'
3. // 获取验证码，这个函数指的是使用GET请求请求目标服务器的
4. Captcha路由
5. export function getCaptcha() {
6.     return http.get("/captcha")
7. }  
8. // 验证用户名\密码，这里指的是使用POST方法请求Login接口，并携带params对象作为参数。
9. export function verifyUserNameAPI(params) {
10.     return http.post("/login", params)
11. }

复制代码

• http.js是什么？
  

1. import request from '@/api/request'
2. const http = {
3.         get(url, params) {
4.             const config = {
5.                 method: 'get',
6.                 url: url
7.             } /*这里如果GET请求有参数，则携带上传入的参数，在
8.             URL中以？的方式放在请求链接中*/
9.             if (params) config.params = params
10.             return request(config)
11.         },
12.         post(url, params) {
13.             const config = {
14.                 method: 'post',
15.                 url: url
16.             }/*同理也是传入用户需要发送到后台的参数，这些参数
17.             放在报文中，载体表达标准是JSON*/
18.             if (params) config.data = params
19.             return request(config)
20.         },
21.     }
22.    
23. //暴露接口，允许Vue文件或其他js,ts文件使用http结构体中的方法
24. export default http

复制代码

• request.js是什么？这个是核心的JS文件，表明了后端的地址，接口超时时间，以及请求拦截器和响应拦截器部分。
  

1. import axios from 'axios';
2. // 创建一个自定义的Axios对象
3. const Axios = axios.create({
4.     baseURL: 'http://127.0.0.1:1234',
5.     timeout: 3000,
6.     /*也可以不设置Content-Type，影响是在你发送请求时
7.     Vue会先发送OPTIONS包探测路由是否存在，需要后端也做设置响应OPTIONS
8.     方法，否则会报跨域错误；我这里用的Beego2，路由里不响应OPTIONS方法，
9.     所以我在这块设置Content-Type*/
10.     headers: {
11.         'Content-Type': 'application/x-www-form-urlencoded'
12.     },
13.     /*这个配置很重要，允许axios携带用户Cookie到后端，不设置这个的话
14.     Set-Cookie是无效的,除此之外,Chrome默认开启了SameSite检查，如果
15.     后端不主动设置SameSite = none,Set-Cookie是无效的。详情请文章末尾
16.     参考阮老师的SameSite讲解*/
17.     withCredentials: true
18. });
20. Axios.interceptors.request.use(req => {
21.     // 请求拦截处理
22.     // console.log('这里是请求拦截器，我拦截了请求', req);
23.     return req;
24. }, err => {
25.     console.log('在发送请求时发生错误，错误为', err);
26.     //这里不能直接放回err,需要按照官方说明返回一个Promise
27.     return Promise.reject(err);
28. })
30. Axios.interceptors.response.use(res => {
31.         // 响应拦截处理
32.         // console.log('响应拦截 ', res);
33.         return res.data;
34.     }, error => {
35.         const err = error.toString();
36.                 //按照实际的响应包进行解析，通过关键字匹配的方式
37.         switch (true) {
38.             case err.indexOf('Network') !== -1:
39.                 console.log('后端服务器无响应或者URL错误', err);
40.                 break;
41.             case err.indexOf('timeout') !== -1:
42.                 console.log('请求后端服务器超时！', err);
43.                 break;
44.         }
45.         return Promise.reject(error);
46.     })
48. //暴露Axios实例化对象，允许所有文件调用Axios
49. export default Axios;

复制代码

• 如何在Vue文件中请求封装好的API呢？
  

1. //导入声明的API请求函数
2. import { getCaptcha } from "@/api/api";
3. import { useMessage } from "naive-ui";
5. export default {
6.   setup() {
7.     let captchaId = ref();
8.     onMounted(() => {
9.        //onMounted是Vue声明周期的钩子函数，由Vue提供，
10.        //请参考Vue声明周期钩子官方文档
11.       getcaptchaAPI();
12.     });
13.     function getcaptchaAPI() {
14.       getCaptcha()
15.         .then((res) => {
16.           /*这里的res是响应成功是返回的数据，res.data说明获取报文
17.           中的data字段对应的值,我在setup声明使用的ref，所以赋值时
18.           需要使用captchaId.value的方式*/
19.           captchaId.value = res.data;
20.         })
21.         //在这里处理错误
22.         .catch((err) => console.log(err));
23.     }
24.    }
25. }

复制代码

今天的分享就到这里了，现在你的项目既能请求后端接口，又能进行路由跳转，具备了项目的基本条件，可以尝试写一个简单地页面了。
参考文章：

• 传送门：Cookie 的 SameSite 属性
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！