【042】vue-cli4.0基础学习：axios的简单使用

介绍

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

特征

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

安装

在vue-cli项目根目录中打开cmd窗口，输入命令：

npm install axios

简单使用

模版代码：

axios.get(url)
	.then((res) => { })
	.catch((err) => {  })

打开v-news.vue文件，完整代码如下：

<template>
    <div class="v-news content">
        <ul>
            <li v-for="item in lists" :key="item.id">
                <router-link :to="{ name: 'detail', params: { id: item.time } }">{{ item.title }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
// 引入 axios 
import axios from 'axios';

export default {
    name: 'v-news',
    desc: '新闻列表',
    data() {
        return {
            lists: []
        }
    },
    created() {
        axios.get('/news/lists')
            .then((res) => {
                this.lists = res.data;
            })
    }
}
</script>

使用完成，在浏览器中运行查看效果，可以看到数据正常显示。

总结

axios的请求方式不仅仅有get，还有其他的，比如post，delete等，在本章使用了get，如果大家想了解更多，可以在网上查看axios使用文档。