Vue2.0 梳理系列 | Axios（上）

最新推荐文章于 2024-08-14 20:37:21 发布
最新推荐文章于 2024-08-14 20:37:21 发布
阅读量466 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue ajax web java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HFunTeam/article/details/119746047
本文详细介绍了Vue框架下的Axios请求配置，包括GET、POST、PUT、DELETE等操作，并展示了如何使用拦截器处理请求和响应。同时，通过实例演示了创建实例对象和并发请求的用法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

从1989年 Tim 发明了超文本标记语言 HTML 开始，前端的发展就此开始了。从开始的静态网页，再到 ASP、JSP 和 PHP 等创建动态 HTML 方式的诞生，之后是 JavaScript的加入，JavaScript 操作 HTML，JQuery 的诞生。从 MVC 模式演变到 MVVM框架模式等等，前端在悄无声息间茁壮成长。

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed。2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014.01.24，Vue 正式对外发布，版本号是 0.8.0。

2015.10.26，vue-router、vuex、vue-cli 相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。2016.10.01，Vue 2.0 发布，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

本系列旨在梳理 Vue 2.0 相关知识，接下来让我们一起Vue的旅途吧！

一、Axios 的介绍及其配置

  • 介绍：Axios 就是通过 promise 把 Ajax（对网页的数据局部刷新）进行封装。

  • 配置：首先搭建本地的数据接口 json-server（ json-server 是一个 Node 模块，运行 Express 服务器，能够快速的搭建一个后台服务，模拟后端数据）。

1.全局安装  json-server

npm install -g json-server

2.创建 db.json 文件，写上后台数据

{
  "posts": [
    {
      "id": 1,
      "title": "我是第一",
      "author": "第一"
    },
    {
      "id": 2,
      "title": "这里是标题",
      "author": "葛媛"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "comment",
      "postId": 1
    },
    {
      "body": "这是body",
      "postId": 2,
      "id": 2
    }
  ],
  "profile": {
    "name": "我的名字"
  }
}

3.启动 json-server 并显示出相关链接

json-server --watch db.json

4.创建一个 html

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--使用CDN命令，HTML文件中必须包含这个 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <script>
        console.log(axios);
</script>
</body>


</html>

二、Axios 请求的基本配置与使用

  • 基本使用

    1、发送GET请求类型从服务器端读取posts的数据

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn-success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');


        //第一个
        btns[0].onclick = function () {
            //发送AJAX请求
            axios({
                //请求类型
                method: 'GET',
                //URL
                url: 'http://localhost:3000/posts/2',
            }).then(response => {
                console.log(response);
            });
        }
</script>
</body>


</html>

    2、发送POST请求类型向服务器端添加posts新数据

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn-success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');


        //添加一篇新的文章
        btns[1].onclick = function () {
            //发送AJAX请求
            axios({
                //请求类型
                method: 'POST',
                //URL
                url: 'http://localhost:3000/posts',
                //设置请求体
                data: {
                    title: "这里又是一个标题",
                    author: "腾飞"
                }
            }).then(response => {
                console.log(response);
            });
        }
</script>
</body>


</html>

    3、发送PUT请求类型更新服务器端已有posts的数据

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn-success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');


        //更新数据
        btns[2].onclick = function () {
            //发送AJAX请求
            axios({
                //请求类型
                method: 'PUT',
                //URL
                url: 'http://localhost:3000/posts/3',
                data: {
                    "title": "这里又是一个标题",
                    "author": "沸腾"
                }
            }).then(response => {
                console.log(response);
            });
        }
</script>
</body>


</html>

    4、发送delete请求类型删除服务器端posts数据

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn-success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');


        //删除数据
        btns[3].onclick = function () {
            //发送AJAX请求
            axios({
                //请求类型
                method: 'delete',
                //URL
                url: 'http://localhost:3000/posts/3',
                data: {
                    "title": "这里又是一个标题",
                    "author": "沸腾"
                }
            }).then(response => {
                console.log(response);
            });
        }
</script>
</body>


</html>

    5、创建实例对象发送请求

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="container">
        <h2 class="page-header">创建实例对象</h2>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');


        //创建实例对象 
        const sun = axios.create({
            baseURL: 'https://api.apiopen.top',
            timeout: 2000
        });
        // 实例对象发送请求
        sun({
            url: '/getJoke',
        }).then(response => {
            console.log(response);
        })
        //借助封装好的方法发送请求
        // sun.get('/getJoke').then(response => {
        //     console.log(response);
        // })
</script>
</body>


</html>

    6、同时发送多个请求（多并发请求）

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多并发</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <script>
        //发送多个请求(并发请求)，若一个请求出错，那就会停止请求
        axios.all([
                axios.get('http://localhost:3000/posts'),
                axios.get('http://localhost:3000/posts', {
                    params: {
                        id: 1
                    }
                })
            ])
            .then(
                axios.spread((res1, res2) => {
                    console.log(res1);
                    console.log(res2);
                })
            ).catch(err => {
                console.log(err)
            })
</script>
</body>


</html>

三、axios拦截器

分为请求拦截器和响应拦截器，用于在发送请求或得到响应后进行响应处理。

  • request请求拦截器：

发送请求前统一处理，设置用户登录请求等。

  • response响应拦截器：

根据响应的状态码来进行下一步操作，从而跳转不同的提示页面。

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <script>
        //Promise
        // 设置请求拦截器 （config 配置对象）
        axios.interceptors.request.use(function (config) {
        // 在发送请求之前做什么（例如要求用户登录判断是否有token）
            console.log('请求拦截器 成功');
            return config;//放行请求
        }, function (error) {
        //  对请求错误做什么(例如请求超时，跳转其他页面)
            console.log('请求拦截器 失败');
            return Promise.reject(error);
        });


        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
        //对响应数据做什么（对数据进行过滤）
            console.log('响应拦截器 成功');
            return response;
        }, function (error) {
        //对响应错误做什么（根据错误码跳转不同的错误提示）
            console.log('响应拦截器 失败');
            return Promise.reject(error);
        });
        //发送请求
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts'
        }).then(response => {
            console.log('自定义回调处理成功结果');
        }).catch(reason => {
            console.log('自定义失败回调');
        })
</script>
</body>


</html>

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

葛媛

HFun 前端攻城狮

HFun TM
关注
vue2 使用 axios
bjzhang75的博客
05-05 4859
以上代码封装了 Axios API 的基本用法，并且提供了一定程度的错误处理和默认配置。为了让所有 Vue 组件都能方便地访问 Axios，可以将其挂载到 Vue 的原型上，这样在每个组件中就可以通过 this.$http 来调用 Axios。在 Vue.js 中封装 Axios API 可以简化请求处理并提供统一的错误处理、默认配置和数据格式化。根据实际项目需求，还可以进一步封装 Axios 实例以提供更符合业务逻辑的 API 调用方式。以上就是 Vue 2 中如何使用 Axios 的基本步骤。
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
10-16
在Vue2.0中，通常使用axios这个HTTP客户端进行数据的异步获取。在文章中提到了使用axios.get方法发起GET请求来获取数据。通常请求的接口URL会被配置在代理（proxyTable）中，以解决开发环境下的跨域问题。如示例所示...
vue2.0 中axios 调用接口
weixin_46021808的博客
10-29 1404
安装：npm install axios --save main.js 入口文件中全局挂载（这里使用原型链挂载）： import axios from 'axios'; Vue.prototype.$http = axios; config文件夹下的index.js 配置服务器环境 module.exports = { dev: {//开发服务器 // Paths assetsSubDirectory: 'static', assetsPublicPath: '/',
Vue2 axios
最新发布
qq_53374893的博客
08-14 424
说明一下， 当前服务器 有资源 就不会走代理服务器了，直接返回当前资源 而且只能代理一个服务器.
Vue2的axios
qq_58081244的博客
09-09 315
axios
vue2.0-axios
宇世无情的博客
02-26 371
axios简单了解
Vue2.0打造外卖商家模块的实践教程
### Vue2.0基础知识点 Vue2.0是前端流行的JavaScript框架之一，由尤雨溪创建...开发者可以利用这些知识点，参考该实战例子，快速入门Vue2.0的开发，并在此基础上进一步深入学习和实践，开发出功能更加完善的商业项目。
使用Vue2.0与elementUI构建多功能后台管理系统
资源摘要信息: "Vue2.0...以上信息梳理了Vue2.0结合elementUI开发后台管理系统中所涉及的核心知识点和概念。在实际开发过程中，这些知识点将相互结合，发挥各自的作用，共同构建一个功能齐全、用户友好的后台管理系统。
Vue2.0打造知乎日报单页应用实战指南
在这个项目中，我们将深入讨论如何使用Vue2.0框架开发一个类似知乎日报的单页应用（SPA）。Vue.js是一个构建用户界面的渐进式JavaScript框架，专注于视图层，易于上手和集成。在开发单页应用时，Vue2.0提供了一种...
Vue2.0开发高仿今日头条单页应用项目教程
根据给定的文件信息，我们可以详细阐述关于“基于Vue2.0高仿今日头条单页应用”的相关知识点，这些内容主要涉及Vue.js框架以及单页应用（SPA）的开发技术。 首先，我们需要了解Vue.js框架的基本概念。Vue.js是一个...
vue2基础版axios封装
weixin_63456913的博客
05-30 655
main.js引用封装的请求；
vue2中的ajax之Axios
gaoqiang1112的博客
03-06 765
1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护3、参考：GitHub上搜索axios，查看API文档   或进入这个网站 https://www.kancloud....
Axios解决跨域问题（Vue2版）
热门推荐
weixin_43565079的博客
09-13 7万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
vue2.0 中引入和使用 axios
James_liPeng的博客
01-03 3664
vue2.0 中引入和使用 axios
vue2 项目中axios二次封装以及拦截器 （全篇超级详细哦 ） 新手小白也适合哦
warmmmm_d的博客
06-19 5385
/ 基本配置baseURL: 'http://localhost:3000/', // 根据实际情况修改API地址timeout: 5000 // 设置超时时间，单位为ms});// 请求拦截器// 设置请求头部分，这里举例使用了localStorage存储的token作为身份标识});// 响应拦截器== 200) { // 根据接口返回的状态码判断是否有错误// 自定义错误提示} else {});
组件的生命周期、vue2中使用axios、插槽
m0_74331160的博客
01-05 699
组件的生命周期 vue2中使用axios 插槽
Vue2 与 Vue3 全局引入 Axios 的详细教程
weixin_35056962的博客
08-04 790
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，而 Axios 是一个基于 Promise 的 HTTP 客户端，常用于与后端服务器进行数据交互。在实际项目中，我们通常需要全局引入 Axios 以便在各个组件中方便地进行 HTTP 请求。本文将详细介绍如何在 Vue2 和 Vue3 项目中全局引入...
小白也能轻松使用Vue 2 + Axios：详细讲解基础配置和全局拦截器的使用方法
weixin_43263566的博客
09-29 1641
在Vue2 中封装 axios
axios.js下载
柠夏
02-27 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js 如何安装？ 方法一： CDN引用 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 方法二： 使用Npm $ npm install axios 方法三： 下载axios.js本地文件 Github官网下载——axios.js 更多详情，请转接官网—Axios ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值