Vue 快速入门(八)

posted @ 2023-01-27 22:39 全栈测试开发日记阅读(18) 评论(0) 编辑收藏举报

undefined

本节介绍Vue中的ajax方法——Axios

01 - Axios概述

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

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

官方：http://www.axios-js.com/zh-cn/docs/

特性

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

02 - 安装和使用

安装

1	`1npm i axios`

使用 CDN:

1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
1<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

GET请求示例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in users">
                {{item}}
            </li>
        </ul>
    </div>
</body>
 
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
 
<script>
    //1. 还没有调用getAllUsers方法
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                users:[]
            }
        },
        mounted() {
            this.getAllUsers();
        },
        methods: {
            getAllUsers() { 
                axios.get('http://www.weather.com.cn/data/cityinfo/101010100.html'
                    //, {
                    //     params: {
                    //         ID: 12345
                    //     }
                    // }
                    )
                    // 当使用箭头函数  this 指向的是外层
                    .then(response =>{
                        console.log(response.data)
                        this.users=response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    }) 
</script>
 
</html>

运行结果：

POST请求示例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in users">
                {{item}}
            </li>
        </ul>
        <hr>
        <div>这是POST请求</div>
        <ul>
            {{posts}}
        </ul>
    </div>
</body>
 
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
 
<script>
    //1. 还没有调用getAllUsers方法
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                users: [],
                posts: null
            }
        },
        mounted() {
            this.getAllUsers();
            this.postAllUsers()
        },
        methods: {
            getAllUsers() {
                axios.get('http://www.weather.com.cn/data/cityinfo/101010100.html'
                    //, {
                    //     params: {
                    //         ID: 12345
                    //     }
                    // }
                )
                    // 当使用箭头函数  this 指向的是外层
                    .then(response => {
                        console.log(response.data)
                        this.users = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            postAllUsers() {
                axios.post('https://httpbin.org/post', {
                    firstName: 'Fred',        // 参数 firstName
                    lastName: 'Flintstone'    // 参数 lastName
                })
                    .then(function (response) {
                        console.log('response' + JSON.stringify(response.data));
                        // 这里使用的是function,所以要用vue实例化变量vm来引用。
                        vm.posts = JSON.stringify(response.data)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
 
        },
    }) 
</script>
 
</html>

效果如下：

需要注意：

1. 这里需要注意的是变量赋值，如果使用箭头函数=>，则用this.变量。如果使用function函数，则用vm.变量。
2. 跨域问题，这里调用的是免费的API，而不是本地的后端接口，所以存在跨域问题。我这里使用的是谷歌浏览器的Access-Control-Allow-Origin插件。

没安装插件，请求时的效果，如：

安装Access-Control-Allow-Origin插件后，并设置和启动后的效果，如：

先在Open options page里设置和配置域名，如：

这里开启方法：

多个并发请求示例

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));