axios在项目中的基本用法

最新推荐文章于 2025-04-10 09:28:08 发布

Hell's Angel

最新推荐文章于 2025-04-10 09:28:08 发布

阅读量538

点赞数

分类专栏： vue 文章标签： axios 基本配置请求方法封装

本文链接：https://blog.csdn.net/NET_worker_/article/details/107088670

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了axios在项目中的基本用法，包括在main.js中引入axios、在组件中使用、各种请求方法（get、post、put、patch、delete）、并发请求的实现、axios实例创建以及全局和请求配置的设定。示例代码详实，帮助理解其工作原理。

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

1.基本用法：

安装axios  cnpm install axios --save

在 main.js中引入axios：

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios=axios;

2. 在组件中使用axios：

  this.$axios
       .get(url, { params: {} })
       .then(res => {
         console.log(res);
       })
       .catch(err => {
         console.error(err);
       });

3.axios 请求方法：

get：获取数据，请求指定的信息，返回实体对象
post：向指定资源提交数据（例如表单提交或文件上传）
put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
delete：请求服务器删除指定的数据

4.axios并发请求：

并发请求：同时进行多个请求，并统一处理返回值

示例代码：

this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

5.创建axios实例：

示例代码：

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

6.axios全局配置：

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

7.axios请求配置：

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置