Vue2学习（六）：网络通信Axios

阿标的博客

已于 2024-02-17 23:14:32 修改

阅读量133

点赞数

分类专栏： Vue学习文章标签： vue.js 学习

于 2023-07-02 11:01:23 首次发布

本文链接：https://blog.csdn.net/weixin_46175652/article/details/131498339

版权

Vue学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Vue2学习（六）：网络通信Axios

一、Axios介绍

1、什么是Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

2、Axios的特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

二、安装

使用npm安装：

npm install axios --save

使用 unpkg CDN:

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

三、基础案例

创建一个模拟请求后的返回json：

{
  "name": "张三",
  "age": "18",
  "sex": "男",
  "address": {
    "street": "新桥街道",
    "city": "深圳",
    "country": "中国"
  },
  "links": [
    {
      "name": "Vue Router",
      "url": "https://router.vuejs.org/zh/introduction.html"
    },
    {
      "name": "Axios",
      "url": "https://www.axios-http.cn/docs/intro"
    },
    {
      "name": "Vue.js",
      "url": "https://v2.cn.vuejs.org/v2/guide/index.html"
    }
  ]
}

<html>
	<head>
		<title>网络通信Axios</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>姓名：{{user.name}}</p>
			<p>性别：{{user.sex}}</p>
			<p>年龄：{{user.age}}</p>
			<p>地址：{{user.address.country}}-{{user.address.city}}-{{user.address.street}}</p>
			<p>技能点：
				<a v-for="link in user.links" :href="link.url">{{link.name}}</a>
			</p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				user:{}
			},
			mounted(){
				axios.get('./data.json').then(res=>{
					this.user = res;
				});
			}
		});
	</script>
</html>

四、具体使用

1、Get请求

不带参数的请求：

<!-- 方式一 -->
axios.get(url).then(res).catch(res);

<!-- 方式二 -->
axios({
	url: url,
	method: 'GET'
}).then(res).catch(res);

带参数的请求：

<!-- 方式一 -->
axios.get(url,param).then(res).catch(res);

<!-- 方式二 -->
axios({
	url: url,
	method: 'GET',
	params: param
}).then(res).catch(res);

2、Post请求

不带参数的请求：

<!-- 方式一 -->
axios.post(url).then(res).catch(res);

<!-- 方式二 -->
axios({
	url: url,
	method: 'POST'
}).then(res).catch(res);

带参数的请求：

<!-- 方式一 -->
axios.post(url,param).then(res).catch(res);

<!-- 方式二 -->
axios({
	url: url,
	method: 'GET',
	data: param,
	headers:{
		'Content-Type':'application/json'
	}
}).then(res).catch(res);

3、封装形式的API请求

import axios from 'axios';

export function getAll(param){
	return axios({
		url: '/user/getAll',
		method: 'GET',
		params: param
	})
}

引用封装的API：

<script>
import { getAll } from '@/api/*.js';
</script>

阿标的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习（六）：网络通信Axios

网络通信axios请求
复制链接

扫一扫

专栏目录

Vue2学习（六）：网络通信Axios

Vue2学习（六）：网络通信Axios

一、Axios介绍

1、什么是Axios

2、Axios的特性

二、安装

三、基础案例

四、具体使用

1、Get请求

2、Post请求

3、封装形式的API请求

“相关推荐”对你有帮助么？