本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.简介

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API [ JS中链式编程 ] 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造）

2. 第一个Axios

新建json文件，模拟访问返回结果data.json

{
	"name": "张三",
	"url": "https://www.baidu.com",
	"page": 1,
	"address": {
		"street": "毛坦厂",
		"city": "六安",
		"country": "中国"
	}
}

测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Axios</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{info.name}}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                info: {
                    name: null,
                    url: null,
                    page: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            },
            mounted() {
                //钩子函数 
                axios
                    .get('data.json')
                    .then(response => (this.info = response.data));
            }
        }) 
    </script>
</body>

</html>

3.get请求

wthrcdn.etouch.cn/weather_min…

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })

        axios({
            method: "get",
            url: "http://wthrcdn.etouch.cn/weather_mini?city=巢湖"
        }).then(function (resp) {
            alert(JSON.stringify(resp.data));
            console.log(resp.data);
        })

    </script>
</body>

</html>

或者简写方式

    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=巢湖"
    ).then (function (resp) {
        alert(JSON.stringify(resp.data));
    })

4.post请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
            }
        })

        //2.post
        axios({
            method: "post",
            url: "https://api.apiopen.top/api/login",
            data: JSON.stringify({
                account: "1299828500@qq.com",
                password: "123456"
            })
        }).then(function (resp) {
            alert(JSON.stringify(resp.data));
        })


    </script>
</body>

</html>

简化写法

        axios.post("https://api.apiopen.top/api/login", JSON.stringify({
            account: "1299828500@qq.com",
            password: "123456"
        })
        ).then(function (resp) {
            alert(JSON.stringify(resp.data));
        })

vue入门到精通-Axios入门

1.简介

2. 第一个Axios

3.get请求

4.post请求