axios简介

Vue并不能直接支持ajax，所以通过组件来实现ajax异步请求。

最为推荐的组件就是 axios。

在进行下面的学习之前，先把这个组件安装到本地：

npm install axios

 
 

请求

javascript">axios这样发出请求：
	axios(config)
	axios.get(url[, config])
	axios.post(url[, data[, config]])
	axios.put(url[, data[, config]])
	axios.delete(url[, config])
	axios.head(url[, config])
	axios.patch(url[, data[, config]])
说明：
	1.只有url是必须的
	2.axios方法默认的是get请求

关于config配置：
{
	// 请求服务器资源
	url: '/user/findAll',

	// 请求方式
	method: 'get',

	// 与url进行自动拼接
	baseURL: 'https://samarua/',

	// 在请求真正发出之前，对请求数据进行处理
	transformRequest: [function (data) { 
		return data;
	}],
	
	// 在响应真正被接收之前，对响应数据进行处理
	transformResponse: [function (data) {
		return data;
	}],

	// 自定义请求头
	headers: {
		'X-Requested-With': 'XMLHttpRequest',
		'Content-Type': 'application/json'
	},

	// 与请求一起发送的参数
	param: {
		name: Alice,
		age: 12
	},
	
	// 作为请求主体被发送的数据
	data: {
	}

	// 超时时间，超时后请求中断
	timeout: 1000,

	// 跨域请求是否需要凭证
	withCredentials: false,

	// 服务器响应的数据类型
	responseType: 'json',

	// 允许响应内容的最大尺寸
	maxContentLength: 2000,

	// 根据响应状态码定义promise的类型
	validateStatus: function (status) {
		return status >= 200 && status < 300;
	},

	// 最大重定向数目
	maxRedirects: 5
}

 
 

响应

javascript">{
	data: {},				// 响应内容（最最最重要）
	status: 200,			// HTTP响应状态码
	statusText: 'OK',		// HTTP响应状态请求
	headers: {},			// 响应头
	config: {}				// 为请求提供配置信息
}

 
 

使用示例

假设有一个data.json静态资源

[
  {"name": "Alice", "age": 12},
  {"name": "Hana", "age": 11},
  {"name": "Mana", "age": 11}
]

使用axios方法：

<div id="app">
    <ul>
        <li v-for="loli in lolis">
            {{loli.name}} 的年龄是 {{loli.age}} ～
        </li>
    </ul>
</div>
<script type="text/javascript">javascript">
    var app = new Vue({
        el: "#app",
        data: {
            lolis: []
        },
        created() {
            // 生命周期函数，这里使用ajax的返回值初始化数据
            // 注意下面ajax请求与响应的写法
            axios({
                url: "data.json",
                method: "get"
            }).then(res => {
                app.lolis = res.data;
            }).catch(err => {
                alert(err);
            });
        }
    });
</script>

使用axios.get/post方法：

<div id="app">
    <ul>
        <li v-for="loli in lolis">
            {{loli.name}} 的年龄是 {{loli.age}} ～
        </li>
    </ul>
</div>
<script type="text/javascript">javascript">
    var app = new Vue({
        el: "#app",
        data: {
            lolis: []
        },
        created() {
            // axios.get("data.json").then(res => {
            axios.post("data.json").then(res => {
                app.lolis = res.data;
            }).catch(err => {
                alert(err);
            });
        }
    });
</script>

说明：

❶ 实际应用中，请求的不是静态资源，而是服务器上的动态资源（返回的也是json）。

❷ 在IDEA中，按住Shift单击右上角浏览器图标，则以 file 协议访问（file:///Users/samarua/IdeaProjects/vueDemo/demo.html）；直接单击右上角浏览器图标，则以 http 协议访问（http://localhost:63342/vueDemo/demo.html）。

❸ 发出请求的主机/端口号，与服务器的主机/端口号不同时，很可能出现 前端跨域问题 。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

❤️