Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
创始人
2025-01-10 18:05:13
0

在这里插入图片描述


文章目录

  • 前言
  • 一、axios 请求
    • 1. axios的概念
    • 2. axios的安装
    • 3. axiso请求方式介绍
    • 4. axios请求本地数据
    • 5. axios跨域
    • 6. axios全局注册
    • 7. axios支持的请求类型
      • 1)get请求
      • 2)post请求
      • 3)put请求
      • 4)patch请求
      • 5)delete请求
  • 二、axios 进阶
    • 1. 设置axios拦截器
      • 什么是拦截器
      • 拦截器的作用和使用
    • 2. 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.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中实现获取本地数据

    

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)        }) 

在这里插入图片描述

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...