Vue中的axios深度探索：从基础安装到高级功能应用的全面指南
https://img-blog.csdnimg.cn/direct/a61fd1501054444ab7e505aae5375fa4.gif#pic_center前言
在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.data
console.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, //是否代理 websockets
secure: false, //是否https接口
// pathRewrite: { //路径重置如果需要重置，可以重置成target地址
// '^/app':''
// }
},
//第二个跨域代理
'/home': {
target: 'http://127.0.0.1:8000/',
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
// pathRewrite: { //路径重置
// '^/app':''
// }
}
}
}
})
6. axios全局注册
// main.js
import { createApp } from 'vue'
import App from './App.vue'
importAxiosfrom "axios";
// 跨越配置好以后，测试结果
// Axios.defaults.baseURL = "http:127.0.0.1:8000"
const app = createApp(App)
app.config.globalProperties.$axios = Axios
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哀求
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})
}
................................................
// 封装get
get("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)
})
https://img-blog.csdnimg.cn/direct/856076db2d46428dbaa94b453557fad2.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]