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的安装

npm install axios --save

3. axiso请求方式介绍

使用格式：

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

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

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

4. axios请求本地数据

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

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

{"first":[{"name":"张三","nick":"法外狂徒"},{"name":"李四","nick":"小李子"},{"name":"王五","nick":"小五"}]
}

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

<template><div><button @click="getData">获取本地数据</button><p>{{ data.first }}</p><ul v-for="(n, index) in data1.first" :key="index"><li>{{ n.name }}</li><li>{{ n.nick }}</li></ul></div>
</template><script>
import Axios from "axios";
export default {name: "test",data() {return {// 定义变量, object 类型.data1: {},};},methods: {getData() {//   使用axios 请求本地数据//   axios.请求方式("请求接口路径").then(箭头函数).catch(箭头函数)Axios.get("../../../a.json").then((response) => {// 把获取到的数据赋值给变量,然后展示console.log(response);console.log(response.data, typeof response.data);this.data1 = response.data;}).catch((error) => {// 请求失败console.log(error);});},},
};
</script>
<style lang="scss" scoped></style>

5. axios跨域

跨域的简单介绍及后端解决办法：点这0.0

这里在前端解决跨域：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false, /*关闭语法检查*///开启代理服务器（方式一）vue3可能会由问题，如果第一种方式不可以，使用下面方式devServer: {proxy: 'http://127.0.0.1:8000'}, //开启代理服务器（方式二）devServer: {proxy: {//第一个跨域代理'/app': {target: 'http://127.0.0.1:8000/', //接口域名changeOrigin: true,             //是否跨域ws: true,                       //是否代理 websocketssecure: false,                   //是否https接口// pathRewrite: {    //路径重置如果需要重置，可以重置成target地址//     '^/app':''// }},//第二个跨域代理'/home': {target: 'http://127.0.0.1:8000/',ws: true, //用于支持websocketchangeOrigin: true //用于控制请求头中的host值// pathRewrite: {                  //路径重置//     '^/app':''// }}}}
})

6. axios全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'import  Axios  from "axios";
// 跨越配置好以后，测试结果
// Axios.defaults.baseURL = "http:127.0.0.1:8000"
const app = createApp(App)app.config.globalProperties.$axios = Axiosapp.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请求

let data = {}
let config = {}
方式一:  axios.post('/url',data,config)
方式二:  axios({methods: 'post',url: '/url',data: data,config: config
})

3）put请求

该请求和post类似，只是请求方法接口不同，传入对象的methods不同

4）patch请求

该请求和post类似，只是请求方法接口不同，传入对象的methods不同

5）delete请求

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

---

二、axios 进阶

1. 设置axios拦截器

什么是拦截器

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


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

拦截器的作用和使用

1. 作用：

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

2. 实现步骤：

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

核心代码：

// 请求拦截
instance.interceptors.request.use(function (config) {console.group('全局请求拦截')console.log(config)return config},function (err){return Promise.reject(err)}
)// 响应拦截
// 服务器返回数据之后都会先执行此方法
instance.interceptors.response.use(function (response){console.group('全局响应拦截')console.log(response)return response},function (err){return Promise.reject(err)}
)

2. axios 封装

//  utils/request.js
import axios from "axios";
// const baseURL = "http://127.0.0.1:8000"; // 更换成自己的API接口地址
const axiosIns = axios.create({
//   baseURL,timeout: 10 * 1000 // 超时时间设置为10秒
});
// 封装get请求,并将封装的方法暴露出去
export const get = (url, params) => {return axiosIns.get(url,{params})
}
// 封装post请求
export const post = (url, data) => {return axiosIns.post(url,data)
}
// 封装put请求
export const put = (url, data) => {return axiosIns.put(url,data)
}
// 封装delete请求
export const del = (url, data) => {return axiosIns.delete(url,{data})
}
................................................
// 封装getget("https:/localhost:8000/news", {page: 3,per: 3,}).then((resp) => {console.log(resp.data);}).catch((error) => {console.log(error);});
....................................................        
// 封装post
post('https:/localhost:8000/news/login',{userName:'xiaoming',password:'111111'}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})

---