Axios整理(vue 数据请求)

最新推荐文章于 2024-06-04 23:36:56 发布

原创最新推荐文章于 2024-06-04 23:36:56 发布 · 299 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Axios #vue #Mock

vue办公小细节专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Axios的使用，包括安装、引入加载、请求方式、全局默认值、拦截器及跨域处理等内容，还提到跨域测试阶段的解决办法。同时阐述了Mock数据模拟的几种方式，如创建JSON文件、集成服务器、使用线上数据和数据模拟库，并介绍了MockJS的语法。

Axios

中文：https://www.kancloud.cn/yunye/axios/234845

github：https://github.com/axios/axios

1.安装

npm install axios

2.引入加载

import Axios from "axios"

Vue.prototype.$axios = Axios

3.请求

get请求：

this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
	params:{
		 type:"junshi",
		 count:30
	}
})
.then(res => {
	 this.newsData = res.data;
	 console.log(res.data);
})
.catch(error => {
	 console.log(error);
})

post请求：

form-data:?name=iwen&age=20

x-www-form-urlencoded:{name:"iwen",age:20}

注意：axios接受的post请求参数的格式是form-data格式

this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php",	qs.stringify({
	user_id:"iwen@qq.com",
	password:"iwen123",
	verification_code:"crfvw"
}))
.then(res => {
	console.log(res.data)
})
.catch(error => {
	console.log(error);
})

4.全局的 axios 默认值

	axios.defaults.baseURL = 'https://api.example.com';
	axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5.拦截器

6.跨域处理：

修改config index.js文件

proxyTable: {
	       "/api": {
	                target: "http://localhost:3000",
	                changeOrigin: true,
	                pathRewrite: {
	                    '^/api': ''
	                }
	        }
}

添加host

Vue.prototype.HOST = '/api'

注意：此种跨域解决方案，只能适用于测试阶段，打包的时候，不会具备服务器

不能跨域了，后端解决。

Mock：数据模拟

1.自己创建JSON文件。使用get请求形式访问数据

优点：方便，快捷

缺点：只能存在get请求

2.项目中集成服务器，模拟各种接口

优点：模拟真实线上环境

缺点：增加开发成本

3.直接使用线上数据