vue + axios最新快速上手入门

已于 2023-05-03 15:14:09 修改
阅读量726 收藏
点赞数
文章标签： vue.js npm javascript
于 2023-05-01 15:33:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44084452/article/details/130443324
版权
该教程介绍了如何在Vue项目中使用axios进行API请求。首先，讲解了如何创建Vue项目、安装axios以及设置npm淘宝镜像。接着，展示了在components和src/util目录下配置axios的步骤，并提供了axios的简单用法，包括GET、POST、DELETE和PUT请求的方法。最后，提到了在request.js中自定义配置的可能性。

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

axios

注意：以下显示内容中的请求路径请使用自己的后端项目地址！
本教程不提供后端访问地址！

文章目录

1. axios 简单使用

1.1 创建项目

安装 node.js

官网：https://nodejs.org/zh-cn

建议选择长期维护版本

在这里插入图片描述
下载安装后可通过以下命令确认是否安装成功

# 查看 nodejs版本号
node -v

# 查看 npm 版本号
npm -v

在这里插入图片描述

设置 npm 淘宝镜像
npm config set registry https://registry.npm.taobao.org

# 用以下命令查看是否设置成功
npm config get registry

在这里插入图片描述

安装 vue 脚手架
npm i -g @vue/cli

# 用以下命令查看脚手架版本号
vue -V

在这里插入图片描述

创建项目（这里以 vue2 为例）（vue3 只有创建项目时不同，使用axios是相同的步骤）
vue create 你的项目名

选择 Default ([Vue 2] babel, eslint) 后回车会自动创建项目

在这里插入图片描述

创建成功

在这里插入图片描述

启动项目测试是否创建正确

通过以下命令启动项目

cd 你的项目名

npm run serve

在浏览器输入下图的网址访问项目

白框中的网址应为你自己的网址，不要抄我的！

在这里插入图片描述

启动成功！

在这里插入图片描述

1.2 安装 axios

打开项目

在终端中输入以下命令安装 axios（vs code 中终端快捷键：Ctrl + ` ）

（`）就是 Esc 下面的建

npm i axios
设置禁用语法检查

在 vue.config.js 中下图的位置添加以下代码禁用语法检查

注意代码的上一句还有一个逗号

代码：

lintOnSave:false,

在这里插入图片描述

在 components 中新建 vue 文件

如下图

在这里插入图片描述

在 App.vue 中引入并使用 Test.vue

在这里插入图片描述

在 src 下新建目录 util

在其中新建文件 request.js

在这里插入图片描述

在 request.js 中配置 axios
import axios from "axios"   // 引入axios

const request = axios.create({  // 创建axios

})

export default request  // 暴露 axiso

在这里插入图片描述

在 Test.vue 中引入并使用 axios

如下是最简单的 axios 请求

<template>
    <div>
        <button @click="test">测试</button>
    </div>
</template>

<script>
import request from '@/util/request';	// 引入 request
    export default {
        methods: {
            test() {
                request.get('http://localhost:8081/user/test').then(
                    response => {
                        console.log(response.data);
                    },
                    error => {
                        console.log(error.message);
                    }
                )
            }
        }
    }
</script>

点击测试后可以拿到后端返回的数据

在这里插入图片描述

1.3 axios 简单用法介绍

axios 的使用（以登录注册为例）

axios 有以下常见写法

axios(config)

axios.get(url,config)

axios.delete(url,config)

axios.post(url,data,config)

axios.put(url,data,config)

url：请求地址

data：请求携带的数据

config：配置对象（没有需要修改的配置可以不写）

以下仅列出常用写法
1. 通用

axios(config)

axios({
    method: 'POST', // 请求方式 如：GET,POST,PUT 等
    url: 'http://localhost:8081/user/login', //请求地址
    data: { // 请求是携带的数据
        name: '123456',
        password: '123456'
    }
}).then( // 请求后的回调，参数为函数
    response => { // 第一个回调函数是请求成功后的回调 response 是响应体
        console.log(response.data); //在控制台打印响应体中的数据
    },
    error => { // 第一个回调函数是请求失败后的回调
        console.log(error.message); //在控制台打印错误消息 如：Network Error 是请求地址错误或网络错误
    }
)
2. post

axios.post(url,data,config)

// axios.xxx(url,config) xxx：是请求方式 如：get,post,delete,put
axios.post('http://localhost:8081/user/login',{
                name: '123456',
                password: '123456'
            },{
                //这里是config，可以不写
            }).then(
            response => {
                console.log(response.data);
            },
            error => {
                console.log(error.message);
            }
        )
3. get

axios.get(url,config)

这种请求方式传递参数请使用 `` 这种模板字符串，变量使用 ${} 进行引用

axios.get(`http://localhost:8081/user/test?name=${this.user.name}&password=${this.user.password}`,{
                //这里是config，可以不写
            }).then(
            response => {
                console.log(response.data);
            },
            error => {
                console.log(error.message);
            }
        )
3.1. get 的第二种写法

axios.get(url,config)

axios.get('http://localhost:8081/user/test',{
            params:{ // 配置对象中的 params 可以给 get 类型请求传值 并且浏览器地址栏不会有变化
                name: '123456',
                password: '123456'
            }
        }).then(
        response => {
            console.log(response.data);
        },
        error => {
            console.log(error.message);
        }
    )
4. delete

axios.delete(url,config)

axios.delete('http://localhost:8081/user/deleteTest',{
            params:{
                name: '123456',
                password: '123456'
            }
        }).then(
        response => {
            console.log(response.data);
        },
        error => {
            console.log(error.message);
        }
    )

delete 请求实际上和 get 请求一样

在这里插入图片描述

5. put

axios.put(url,data,config)

axios.put('http://localhost:8081/user/putLogin',{
            name: '123456',
            password: '123456'
        },{
    		// 这里是 config 可以不写
		}).then(
            response => {
                console.log(response.data);
            },
            error => {
                console.log(error.message);
            }
        )

put 请求实际上和 axios.post(url,data,config) 一样

1.4 还可以在 request.js 中自定义配置

如自定义请求地址前缀
详细配置请看替他文章，这里只是快速入门

import axios from "axios"   // 引入axios

const request = axios.create({  // 创建axios
    
    baseURL:'http://localhost:8081/user'	// 自定义请求地址前缀
    timeout: 3000	// 请求超时时间
})

export default request  // 暴露 axiso
最新axios快速入门教程
猿小白的博客
07-26 1124
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。想要使用异步/等待？在外部函数/方法中添加'async'关键字。这里以get请求方式举例说明，其它请求方式类似。将请求参数放到params中。将请求参数拼接到url中。......
vue3快速上手指南
最新发布
weixin_43943583的博客
07-15 2351
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台_，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。<template>
vue中axios配置文件最新版
Jenny_ljj的博客
06-08 433
【代码】vue中axios配置文件最新版。
【Vue】axios入门（一）
清风微醺的博客
07-11 181
视频 json-server npm install -g json-server json-server官网 json-server --watch test.json axios <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http
vue 之axios入门(四 )
xingxing12323的博客
03-14 286
axios的get语法 axios.get("/list") // 请求路径和请求参数拼接 .then(function(resp){ // 成功回调函数 }) .catch(function(){ // 失败回调函数 }) // 参数较多时，可以通过params来传递参数 axios.get("/item/category/list", { ...
vue 基础入门：axios
薛定谔的猫
12-31 233
其实可以理解为 params就是get请求 data就是post请求。axios是前端圈最火的，专注于数据请求的库。axios 是一个专注于网络请求的库！用axios发起POST请求。axios的基本语法如下。axios 的基本使用。
vue入门到精通-Axios入门
weixin_44480609的博客
06-29 413
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异 步通信，其功能特点如下：新建json文件，模拟访问返回结果data.json 测试代码 3.get请求 http://wthrcdn.etouch.cn/weather_mini?city=巢湖 或者简写方式 4.post请求 简化写法...
前端技术栈三(vue+Axios)
weixin_51580177的博客
06-19 1552
花了大部分时间学习Vue，总体而言遇到了很多安装的bug，还好一步步解决了，也是成长的必经之路，不过确实学到后面，虽然表面看着知识点很多，但是使用也更加简便了
SpringBoot+Vue项目快速入门
web13293720476的博客
09-10 671
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Vue3与Axios压缩包快速入门指南
综上所述，axios_vue3.zip这个压缩包为前端开发者提供了一个快速搭建现代Web应用的起点，包含了Vue.js 3.x版本的核心库文件以及axios的压缩版库文件，这两个工具的结合将大大提升开发效率和应用性能。
Vue入门（八）——axios的使用
qq_44334291的博客
07-20 296
关于Vue的大部分内容都结束了，剩下一个小小的知识点，这个不属于Vue的范畴，但是也是极其重要的。因为它与Vue密切相关，所以在最后在说一下它。——axios 之前已经介绍过了axios是什么了。下面直接进入正题。 功能特点： # 标题可以发送XMLHttpRequests请求 # 在node.js中发送http请求 # 转换请求和响应数据 # 支持Promise # 拦截请求与响应 多种请求方式： 下面给展示一个简单的例子 发送Get请求展示 上面是发送一个请求，但是有时候我们要需要同时发送两个请
vue的学习之路（Axios 基本使用）
程序员小王的博客
12-16 1248
axios详解
Vue简单入门和axios
YKbsmn的博客
03-27 370
一、基本元素 1.1 el el是用来设置Vue实例挂载（管理）的元素 Vue会管理el选项命中的元素及其内部的后代元素 可以使用其他的选择器，但是建议使用ID选择器 可以使用其他的双标签，不能使用HTML和BODY 1.2 data：数据对象 Vue中用到的数据定义在data中 data中可以写复杂类型的数据，比如对象，数组。 定义对象的属性，显示的时候可以直接调用对象的属性输出指定属性 数组可以通过下标输出指定数组的信息 渲染复杂类型数据时，遵守js的语法即可 ...
Vue基础入门（二）axios简介
longzhanpeng的博客
08-12 579
axios简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： - 从浏览器中创建 XMLHttpRequest - 从 node.js 发出 http 请求 - 支持 Promise API - 拦截请求和响应 - 转换请求和响应数据 - 取消请求 - 自动转换JSON数据 - 客户端支持防止 CSRF/XSRF ...
Vue+router+Vuex+axios入门
weixin_43977647的博客
02-08 641
Vue安装 npm install -g @vue/cli Vue创建项目过程 1.通过命令行 vue create my-project 2.还有一种方式就是通过vue ui来打开可视化的页面安装，这里记录下我用vue ui来创建项目 vue ui 存在一个问题，就是有电脑上面会报错，如下： pc@pc-PC MINGW64 /e/vue/test $ vue u...
vue2.0版本使用axios发送请求
qq_39355295的博客
09-04 592
注意：在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。 目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，下面来具体介绍一下axios的使用。 axios 基本介绍 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以...
vue2.0 中引入和使用 axios
James_liPeng的博客
01-03 3634
vue2.0 中引入和使用 axios
Vue3 小兔鲜：Pinia入门
CaptainDrake的博客
05-31 691
Pinia概念、实现counter、getters、异步action、storeToRefs保持响应式解构
vue学习---基于vue2中的axios
茹嗨瑞的博客
10-30 1707
axios插件通过XMLHttpRequest or JSONP 使得vue.js 具备了发送web请求，处理web响应的能力。vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。 **axios是基于 Promise 的 HTTP 请求客户端**，可同时在浏览器和 Node.js 中使用。有跨端发请求的能力。在axios之前是用fetch也是原生的API通过promise发请求的，再往以前就是通过xhr发送请求的
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值