Vue中axios的使用备忘

已于 2023-01-05 09:39:28 修改
阅读量445 收藏
点赞数
分类专栏： Vue相关 文章标签： vue.js javascript 前端
于 2023-01-05 09:25:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17847881/article/details/128557359
版权
文章详细介绍了Vue.js中如何使用axios进行HTTP请求，包括安装、引入、各种请求方法(get、post、put、patch、delete)的使用，并发请求，axios实例的创建与配置，以及请求和响应拦截器的设置。此外，还展示了错误处理和取消请求的功能，并提供了一个封装好的axios工具类http.js的使用示例。
摘要由CSDN通过智能技术生成

文章目录

Vue中axios的使用备忘

1. 安装axios

# 在安装node.js的前提下，在命令行窗口下执行指令：
npm i axios --save

2. main.js中引入axios

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

3. 组件中使用axios

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

3-1 get请求

this.$axios.get('/a.json',{
    params: {
        id:1
    }
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})
			
//方法二
this.$axios({
	method: 'get',
	url: '/a.json',
    	params: {
            id:1
        }
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

3-2 post请求

// form-data 表单提交，图片上传、文件上传时用该类型比较多
// application/json 一般是用于 ajax 异步请求
// 		form-data和json的区别在参数格式上, 一个只能传对象，一个可以传对象和数组，格式为json

//方法一
this.$axios.post('/url',{
	id:1
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

//方法二
$axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

// form-data请求
let data = {
	//请求参数
}
let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}
this.$axios.post('/a.json',formdata).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

3-3 put和patch请求

//put请求
this.$axios.put('/url',{
	id:1
}).then(res=>{
	console.log(res.data);
})

//patch请求
this.$axios.patch('/url',{
	id:1
}).then(res=>{
	console.log(res.data);
})

3-4 delete请求

this.$axios.delete('/url',{
	params: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
})

this.$axios.delete('/url',{
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
})

//方法二
axios({
    method: 'delete',
    url: '/url',
    params: { id:1 },
    data: { id:1 } 
}).then(res=>{
	console.log(res.data);
})

4. axios并发请求_同时发送多个请求，统一处理返回值

// 同时进行多个请求，并统一处理返回值
this.$axios.all([
	this.$axios.get('/a.json'),
	this.$axios.get('/a.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:8080',
	timeout: 2000
})			
instance.get('/a.json').then(res=>{
	console.log(res.data);
})

// axios实例常用配置：
// 		baseURL 请求的域名，基本地址，类型：String
// 		timeout 请求超时时长，单位ms，类型：Number
// 		url 请求路径，类型：String
// 		method 请求方法，类型：String
// 		headers 设置请求头，类型：Object
// 		params 请求参数，将参数拼接在URL上，类型：Object
// 		data 请求参数，将参数放到请求体中，类型：Object

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

// axios实例配置
let instance = this.$axios.create();
instance.defaults.timeout = 3000;

// axios请求配置
this.$axios.get('/a.json',{
	timeout: 3000
}).then()

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

6. 拦截器 – 在请求或响应被处理前执行拦截

6-1 请求拦截器

// 全局axios请求拦截器
this.$axios.interceptors.request.use(config=>{
	// 发生请求前的处理
	return config
},err=>{
	// 请求错误处理
	return Promise.reject(err);
})

// axios实例拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

6-2 响应拦截器

// 全局axios响应拦截器
this.$axios.interceptors.response.use(res=>{
	//请求成功对响应数据做处理
	return res //该返回对象会传到请求方法的响应对象中
},err=>{
	// 响应错误处理
	return Promise.reject(err);
})

// 取消拦截
this.$axios.interceptors.request.eject(instance);

7 错误处理

this.$axios.get('/url').then(res={
	//…………
}).catch(err=>{
	//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
	console.log(err);
})

8. 取消请求–用于取消正在进行的http请求

let source = this.$axios.CancelToken.source();
this.$axios.get('/a.json',{
	cancelToken: source
}).then(res=>{
	console.log(res)
}).catch(err=>{
	//取消请求后会执行该方法
	console.log(err)
})

9. 封装好的axios的工具类使用

9-1 工具类：http.js

import axios from 'axios';
import ElementUI from "element-ui";

axios.defaults.baseURL = ''
// 设置通用Http请求的超时时间
axios.defaults.timeout = config.http_timeout

// HTTP response 拦截器
axios.interceptors.response.use(
	(response) => {
		return response;
	},
	(error) => {
		if (error.response) {
			if (error.response.status == 404) {
				ElementUI.Message.error("Status:404，正在请求不存在的服务器记录!")
			} else if (error.response.status == 500) {
				ElementUI.Message.error(error.response.data.message || "Status:500，服务器发生错误！!")
			} else {
				ElementUI.Message.error(error.message || "Status:${error.response.status}，未知错误！")
			}
		} else {
			ElementUI.Message.error("请求服务器无响应!")
		}

		return Promise.reject(error.response);
	}
);

var http = {

	/** get 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} params
	 * @param  {参数} config
	 */
	get: function(url, params={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'get',
				url: url,
				params: params,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** post 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	post: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** put 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	put: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'put',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** patch 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	patch: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'patch',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** delete 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	delete: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'delete',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** jsonp 请求
	 * @param  {接口地址} url
	 * @param  {JSONP回调函数名称} name
	 */
	jsonp: function(url, name='jsonp'){
		return new Promise((resolve) => {
			var script = document.createElement('script')
			var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
			script.id = _id
			script.type = 'text/javascript'
			script.src = url
			window[name] =(response) => {
				resolve(response)
				document.getElementsByTagName('head')[0].removeChild(script)
				try {
					delete window[name];
				}catch(e){
					window[name] = undefined;
				}
			}
			document.getElementsByTagName('head')[0].appendChild(script)
		})
	}
}
export default http;

9-2 工具类的使用实例：

================【说在前头_Zhaof--Http请求】
Vue中使用Axios，发起Http请求，   -- 【http.js自己封装实现了，过程好艰难呀，好在最终完成了】
1. 在public/config.js中配置好Url地址，如：url_1； 【config.js在public/index中引用了，处处可用】
**************************************************************
// public/config.js内容如：
let config = {
    // 配置外部其他的接口Api地址url
    url_1: "http://127.0.0.1:8080/UserInfoApi",
    url_2: "http://192.168.217.132:9090/Api",

    springbootapi_url_zhaof: "http://127.0.0.1:9090/api",
    http_timeout: 60000
}
**************************************************************

2. 在src/api/中的js文件新增方法，如下实例：userInfo， 这样Vue页面中处处可用，参考src/api/zhaof.js
**************************************************************
    // 使用自定义的http发起指定url的请求
    userInfo: {
      url: config.url_1 +'/userInfo',  // 完整url即: http://127.0.0.1:8080/UserInfoApi/userInfo
      name: '测试使用自定义的htt2发起http请求',
      get: async function(){
          return await http.get(this.url)
      }
    },  
**************************************************************

3. Vue中调用上方的userInfo请求：
***************************************************************
methods: {
    async getInfo() {
      // MessageBox.alert("我点击获取数据的按钮啦!","提示")
      // this.$message.success("success成功的提醒内容")
      // this.$message.error("error错误的提醒内容")
      // this.$message.info ("info的提醒内容")
      // this.$message.warning("warning的提醒内容")

      console.log("开始执行userInfo_zhangshan03")

      // 服务器不存在，404之类的接口错误，下方代码就不会再执行了
      var res = await this.$api.zhaof.userInfo.get()
      // 接口相应的返回值
      console.log(res)

      if(res.code == "200"){
        this.$message.success("接口请求成功!")
        this.userId = res.data.userid
        this.userName = res.data.username
        this.email = res.data.email
        this.passWord = res.data.password
      }else{
        // 服务器不存在之类的错误，在http.js中已经统一封装了

        // 接口通畅，但返回业务数据，逻辑码错误， 弹出错误信息即可，
        // let errMsg = res.message;
        // this.$message.error("接口请求失败!!!" + errMsg)
      }
      console.log("执行userInfo结束_zhangshan03")
    },
***************************************************************
详解vue中axios的使用与封装
10-17
本文主要介绍如何在Vue项目中使用Axios，并展示如何进行封装以简化HTTP请求。 首先，Axios的安装非常简单。可以通过npm命令来安装。在命令行中输入以下命令即可： ```bash npm install axios --save ``` 接下来，...
axios的介绍与使用
m0_50570745的博客
04-07 2072
一.什么是axios? axios是前端最流行的ajax请求库,react/vue官方都推荐使用axios发ajax请求。说到axios我们应该了解ajax，因为axios是基于ajax封装出来的。在旧浏览器页面向服务器发请求数据的时候，因为返回的是整个页面的数据，页面都会强制刷新，对于用户来说不是很友好，而且浪费资源，从服务器端发送给服务器的数据是整个页面的数据，浪费网络资源。基于前面的问题，我们需要修改的是页面的部分数据，不希望刷新页面，所以异步网络请求就诞生了。 ajax：异步网络请求，aja
Vue中axios的基本用法
weixin_48494427的博客
07-28 7059
axios是一个基于promise用于浏览器和nodejs的HTTP客户端。简单的理解就是ajax的封装。
Axios使用详解
leva的博客
02-23 1045
它是一个简洁、易用且高效的代码封装库。通俗地讲，它是当前比较流行的一种Ajax框架，可以使用它发起HTTP请求接口功能，它是基于Promise的，相比较Ajax的回调函数能够更好地管理异步操作。$ route.path、$ route.params、$ route.name、$ route.query这几个属性很容易理解，主要用于接收路由传递的参数。（2）route是一个跳转的路由对象，每一个路由都会有一个route对象，它是一个局部的对象，可以获取对应的name、path、params、query等。
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 4万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios基本使用及跨域问题详解
AnnGreen的博客
07-31 1万+
前端请求自然也发展迅速，从原生的XHR到jqueryajax，再到现在的axios和fetch。//www.axios-js.com/zh-cn/）是Vue推荐的http库，这个还是要了解一点的。
vue-axios使用详解
08-30
在 Vue-Axios 中，可以使用 `axios.create()` 方法来创建一个新的 Axios 实例，并进行配置。例如： ``` const instance = axios.create({ baseURL: 'https://some-domain.com/api/' }); ``` 六、Axios 实例方法 在...
vue+axios实现文件下载及vue中使用axios的实例
10-17
3. **在 Vue 组件中使用**：在 Vue 组件中，你可以导入并使用这个配置好的 Axios 实例来发送请求。例如，调用上面定义的 `get` 方法： ```javascript import api from '@/api/index.js'; export default { ...
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
Vue使用axios出现options请求方法
10-16
在Vue项目中，我们经常使用axios库来进行HTTP请求。然而，有时在进行跨域请求时，浏览器会先发送一个预检请求（OPTIONS请求），这是由于CORS（Cross-Origin Resource Sharing，跨源资源共享）机制的规定。当请求的...
vue使用Axios详细流程
qq_37312180的博客
02-10 7599
【代码】vue使用Axios详细流程。
vue项目axios的使用实例详解
流楚丶格念的博客
06-26 7933
1、 基本用法 首先要在 main.js 中引⼊ axios 首先要在 main.js 中引⼊ axios 首先要在 main.js 中引⼊ axios （重要的事情说三遍！！！） 然后才能在组件中使⽤ axios 2、 axios实例 2.1、 创建axios实例示例代码 在配置文件（axios.js）中配置 在其他文件引入包后 也可以同时创建多个axios实例。也可以全部配置 2.3、 axios实例配置示例代码 也可以不用配置，现用现创建现配置 2.4、 axios请求配置示例代码 还可以直接在请求中
Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）
高大志leo的博客
12-03 3万+
前言：axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个方法。 axios介绍 axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 首先需要知道：axios不是一种新的技术。 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点： 从浏览器中创建 XMLHttpRequests 从 nod
Vue项目中axios的使用（基础篇）
weixin_40484820的博客
03-28 2699
通过使用Axios的请求拦截器和响应拦截器，我们可以轻松地处理请求和响应，并在出现错误时进行处理。在使用Axios调用API时，我们可以在API文件中定义一个函数，它使用Axios来发送HTTP请求并返回Promise对象。在成功的回调函数中，我们可以对请求进行一些处理，比如添加公共的请求头。在如上例子中，我们向请求中添加了一个Authorization请求头，它的值为getToken()函数的返回值。在Vue项目中，我们可以使用拦截器来添加公共的请求头、处理请求错误、处理响应错误等操作。
解决 vue 使用 axios 请求跨域问题
实习打字猿的博客
04-18 328
# 找到根目录下 config 文件夹下的 index.js，进行如下修改 module.exports = { dev: { ... proxyTable: { '/api': { target: 'http://127.0.0.1:8833/api', // 后端请求接口 changeOrigin: true, // 允许...
入门 - Vue中使用axios原理分析及解决前端跨域问题
最新发布
qq_61863348的博客
08-19 3020
是Vue创建者主推的请求发送方式，因其简单的配置与良好的性能被前端爱好者所喜爱。众所周知，在进行网页设计时经常需要从后端拿数据，在Web应用初期会将整个页面或者文档直接拿过来，随着Web应用的发展，人们对性能的不断提升，逐渐向无页面刷新从后端获取数据，而axios就是其中一种新兴、火热的方式。在学习Vue中使用axios时，不需要太过于了解请求的发送过程，但需要对各种请求方式有一个大致的认识。本文将会从0到1的介绍vue中如何使用axios，并结合项目实例加深大家印象。
Axios
tian_to_tian的博客
09-07 138
一、axios的安装与使用 1、什么是axios（ajax i/o system） axios：向服务器请求数据的一种技术，不止可以用在vue中，也可以用在react、nodejs中等 2、axios的安装 npm i axios 3、使用 在main.js中导入： import Axios from 'axios' 配置： Vue.prototype.$axios = Axios; 4、应用 this.$axios.get() this.$ax...
axios二次封装
qq_35227244的博客
06-19 281
导读：axios用于网络请求、在开发时常常进行二次封装便于前端请求接口时，在网络请求和响应拦截器中做统一处理。
Vue中axios封装详解与实战
本文将深入讲解Vue框架中axios请求的封装，着重介绍如何在Vue项目中有效地管理和重用axios，这是一个常见的前端开发实践...本文提供的示例代码和实践方法，对学习者理解和实现在Vue项目中使用axios具有很高的参考价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>