Vue中的axios深度探索：从基础安装到高级功能应用的全面指南 ...

---

  

---

前言

    在Vue项目中，高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁，其紧张性不言而喻。本文将带您领略axios的魅力，从根本概念、安装方法，到高级应用本领，助您快速掌握在Vue中利用axios进行HTTP哀求的精华。我们不仅会探讨axios的基础用法，如GET、POST哀求，还将深入探索跨域配置、全局注册以及设置拦截器等高级功能，助您轻松实现优雅的前后端通信。

---

一、axios 哀求

1. axios的概念

   axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简朴的理解就是ajax的封。

它自己具有以下特性：
  

• 从浏览器中创建 XMLHttpRequest
  
• 从 node.js 发出 http 哀求
  
• 支持 Promise API
  
• 拦截哀求和响应
  
• 转换哀求和响应数据
  
• 取消哀求
  
• 主动转换JSON数据
  
• 客户端支持防止 CSRF/XSRF
  

  2. axios的安装

1. npm install axios --save

复制代码

3. axiso哀求方式先容

   使用格式：

1. axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
3. - 提交方式有get post delete put 等,
4. - .then() 请求成功后执行then方法
5. - .catch()请求失败后执行catch方法

复制代码

  例如:get具体使用方法如下：

1. //使用axios发送ajax请求,获取所有新闻信息
2.   fnSerachNews(){
3.           // result是服务端对我们发起请求的响应，请求成功执行then方法
4.       this.$axios.get("http://localhost:8000/news/").then((result) => {
5.           //通过response获取具体数据，赋值给data中定义的newslist
6.           this.newslist = result.data.data
7.           console.log(result.data.data);
8.       }).catch((err) => {
9.                 //请求失败执行catch方法
10.           alert(err)
11.       });
12.   },

复制代码

4. axios哀求当地数据

   1. 在static文件夹底下新建json文件

2. data.json数据格式如下：

1. {
2.     "first":[
3.         {"name":"张三","nick":"法外狂徒"},
4.         {"name":"李四","nick":"小李子"},
5.         {"name":"王五","nick":"小五"}
6.     ]
7. }

复制代码

  3. 在创建的TestView.vue中实现获取当地数据

1. <template>
2.   <div>
3.     <button @click="getData">获取本地数据</button>
4.     <p>{{ data.first }}</p>
5.     <ul v-for="(n, index) in data1.first" :key="index">
6.       <li>{{ n.name }}</li>
7.       <li>{{ n.nick }}</li>
8.     </ul>
9.   </div>
10. </template>
12. <script>
13. import Axios from "axios";
14. export default {
15.   name: "test",
16.   data() {
17.     return {
18.       // 定义变量, object 类型.
19.       data1: {},
20.     };
21.   },
22.   methods: {
23.     getData() {
24.       //   使用axios 请求本地数据
25.       //   axios.请求方式("请求接口路径").then(箭头函数).catch(箭头函数)
26.       Axios.get("../../../a.json")
27.         .then((response) => {
28.           // 把获取到的数据赋值给变量,然后展示
29.           console.log(response);
30.           console.log(response.data, typeof response.data);
31.           this.data1 = response.data;
32.         })
33.         .catch((error) => {
34.           // 请求失败
35.           console.log(error);
36.         });
37.     },
38.   },
39. };
40. </script>
41. <style lang="scss" scoped></style>

复制代码

5. axios跨域

跨域的简朴先容及后端办理办法：点这0.0
   这里在前端办理跨域：

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   lintOnSave:false, /*关闭语法检查*/
5.   //开启代理服务器（方式一）vue3可能会由问题，如果第一种方式不可以，使用下面方式
6.          devServer: {
7.      proxy: 'http://127.0.0.1:8000'
8.    },
9.         //开启代理服务器（方式二）
10.         devServer: {
11.     proxy: {
12.        //第一个跨域代理
13.       '/app': {
14.         target: 'http://127.0.0.1:8000/', //接口域名
15.         changeOrigin: true,             //是否跨域
16.         ws: true,                       //是否代理 websockets
17.         secure: false,                   //是否https接口
18.         // pathRewrite: {    //路径重置如果需要重置，可以重置成target地址
19.         //     '^/app':''
20.         // }
21.       },
22.       //第二个跨域代理
23.       '/home': {
24.         target: 'http://127.0.0.1:8000/',
25.         ws: true, //用于支持websocket
26.         changeOrigin: true //用于控制请求头中的host值
27.         // pathRewrite: {                  //路径重置
28.         //     '^/app':''
29.         // }
30.       }
31.     }
32.   }
33. })

复制代码

6. axios全局注册

1. // main.js
2. import { createApp } from 'vue'
3. import App from './App.vue'
5. import  Axios  from "axios";
6. // 跨越配置好以后，测试结果
7. // Axios.defaults.baseURL = "http:127.0.0.1:8000"
8. const app = createApp(App)
10. app.config.globalProperties.$axios = Axios
12. app.mount('#app')

复制代码

7. axios支持的哀求类型

1）get哀求

   不带哀求参数：
  

• 方式一: axios({ methods: 'get', url: '/ulr' })
  
• 方式二: axios.get('/url')
  

  
带哀求参数：
  

• 方式一: axios.get('/url', {params: {id: 12}})
  
  
  
  • 哀求的地址实际为 http://localhost:8080/url?id=12
    
  
  
• 方式二: axios({
            methods: ‘get’,
            url: ‘url’,
            params: {
                id:12
             }
          })
  

  2）post哀求

1. let data = {}
2. let config = {}
3. 方式一:  axios.post('/url',data,config)
4. 方式二:  axios({
5.          methods: 'post',
6.          url: '/url',
7.          data: data,
8.          config: config
9. })

复制代码

3）put哀求

   该哀求和post类似，只是哀求方法接口差别，传入对象的methods差别
  4）patch哀求

   该哀求和post类似，只是哀求方法接口差别，传入对象的methods差别
  5）delete哀求

1. axios.delete('/url', {params: {id: 12}}) #参数在url params---很重要
2. axios.delete('/url', {data: {id: 12}}) #参数在请求体中 将params改为 data就行　

复制代码

---

二、axios 进阶

1. 设置axios拦截器

什么是拦截器

   request哀求拦截器：发送哀求前统一处理，如：设置哀求头headers、应用的版本号、终端类型等。


response响应拦截器：有时间我们要根据响应的状态码来进行下一步操纵，例如：由于当前的token逾期，接口返回401未授权，那我们就要进行重新登录的操纵。
  拦截器的作用和使用

   1. 作用：
  

• 比如config中的一些信息不符合服务器的要求，得及时拦截下来更改。
  
• 比如每次发送网络哀求的时间，都希望在界面中表现一个动态加载的哀求图标，就是一直在转圈圈，让用户知道当前页面正在加载数据，准备渲染视图。
  
• 比如某些网络哀求（比如登录token）,必须携带一些特殊的信息。
  

  
2. 实现步骤：

1. const instance = axios.create({
2.   //baseURL:url,
3.   timeout:5000  // 延时
4. })
6. 1、在requesr.js中设置请求拦截器
7. interceptors.request.use（）
8. 2、设置响应拦截器
9. interceptors.response.use()

复制代码

  焦点代码：

1. // 请求拦截
2. instance.interceptors.request.use(
3.   function (config) {
4.     console.group('全局请求拦截')
5.     console.log(config)
6.     return config
7.   },
8.   function (err){
9.     return Promise.reject(err)
10.   }
11. )
13. // 响应拦截
14. // 服务器返回数据之后都会先执行此方法
15. instance.interceptors.response.use(
16.    function (response){
17.      console.group('全局响应拦截')
18.      console.log(response)
19.      return response
20.    },
21.   function (err){
22.      return Promise.reject(err)
23.   }
24. )

复制代码

2. axios 封装

1. //  utils/request.js
2. import axios from "axios";
3. // const baseURL = "http://127.0.0.1:8000"; // 更换成自己的API接口地址
4. const axiosIns = axios.create({
5. //   baseURL,
6.   timeout: 10 * 1000 // 超时时间设置为10秒
7. });
8. // 封装get请求,并将封装的方法暴露出去
9. export const get = (url, params) => {
10.   return axiosIns.get(url,{params})
11. }
12. // 封装post请求
13. export const post = (url, data) => {
14.   return axiosIns.post(url,data)
15. }
16. // 封装put请求
17. export const put = (url, data) => {
18.   return axiosIns.put(url,data)
19. }
20. // 封装delete请求
21. export const del = (url, data) => {
22.   return axiosIns.delete(url,{data})
23. }
24. ................................................
25. // 封装get
26. get("https:/localhost:8000/news", {
27.         page: 3,
28.         per: 3,
29.       })
30.         .then((resp) => {
31.           console.log(resp.data);
32.         })
33.         .catch((error) => {
34.           console.log(error);
35.         });
36. ....................................................        
37. // 封装post
38. post('https:/localhost:8000/news/login',{userName:'xiaoming',password:'111111'})
39.          .then(res=>{
40.            console.log(res)
41.          }).catch(err=>{
42.          console.log(err)
43.        })

复制代码

---

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