【Vue.js】012-ajax

訾博ZiBo

发布于 2025-01-06 15:19:25

5300

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以； vue-resource的github: https://github.com/pagekit/vue-resource

二、axios

1、概述

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中；

axios的github:https://github.com/axios/axios；

2、引入axios

方式一：如果你使用es6，只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

方式二：用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或者

<script src="../../js/axios.min.js"></script>

三、get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(err) {
		console.log(err);
	});
//以上请求也可以通过这种方式来发送
axios.get('/user', {
		params: {
			ID: 12345
		}
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(err) {
		console.log(err);
	});

四、Post请求

axios.post('/user', {
		firstName: 'Fred',
		lastName: 'Flintstone'
	})
	.then(function(res) {
		console.log(res);
	})
	.catch(function(err) {
		console.log(err);
	});

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-23，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax