阅读量:1
文章目录
前言
在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' import Axios from "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) }) 
