11、Vue_axios简单使用

axios

axios是一个基于Promiose的HTTP库，用于在Vue.js中完成ajax请求，也可以用在浏览器和node.js中

特性

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

例子

PS.例子都是在组件中进行的

• get例子
  axios_one.vue（用到ElementUI，后面讲解入门步骤）

<template xmlns:el="http://www.w3.org/1999/html">
    <div>
        <button v-on:click="get">发送请求</button>
        <br>
        <p>响应数据：{{info}} </p>
        <br>
        <!-- el-image标签来源于ElementUI-->
        图片：<el-image :src="url" fit="cover"></el-image>
        <br>
        <p>url:{{url}}</p>
    </div>

</template>


<script>
    // 导入axios
    import axios from 'axios'

    export default {
        name: "axios_one",
        data() {
            return {
                info: null,
                url:null
            }
        },
       // methods: {
       //      get() {
       //          axios
       //              .get("https://dog.ceo/api/breeds/image/random")
       //              // 方法1，不推荐（不可用）
       //              .then(function (response){
       //                      // 这种方式的this，指的是当前method，
                            // // 所以会导致赋值失败
       //                      this.info = response.data;
       //                      this.url = response.data.message;
       //                  }
       //              )
       //              .catch(function (error) {
       //                  console.log(error)
       //              })
       //      }
       //  }
        methods: {
            get() {
                axios
                    .get("https://dog.ceo/api/breeds/image/random")
                    // 方法2：箭头函数；箭头函数是没有this的，所以这里的this指的是组件
                    .then(response => {
                            // 提取data，赋值给当前组件的info
                            this.info = response.data;
                            // 提取data中的message值
                            this.url = response.data.message;
                        }
                    )
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }

    }
</script>

<style scoped>

</style>

结果： axios_get.png

---

• post例子

<template>
    <div>
        <button v-on:click="post">发出请求</button>
        响应：<p>{{data}}</p>
    </div>

</template>

<script>
import axios from 'axios'



    export default {
        name: "axios_post",
        data(){
            return{
                data:null
            }
        },
        methods:{
            post(){
                axios
                    .post(
                        // url
                        '/user',
                        // data
                        {'key':'value'}
                        // ...还有其它的参数
                        )
                    .then(response=>
                    {
                     this.dta = response.data
                    })

            }
        }
    }
</script>

<style scoped>

</style>

结果：因为没有该接口，所以404： asiox_post

---

别名

为了方便使用，官方提供了各个请求方式的别名，可以直接使用别名来发出请求：（本章例子中都使用别名）
PS.使用别名发出请求时，url、method、data这些属性都不必在配置中

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

---

别名以及其他更多方法

官方文档：http://www.axios-js.com/zh-cn/docs/#axios-post-url-data-config

ElementUI

因为上面例子用到第三方库ElementUI，所以简单说下它的安装使用

• 安装
  npm：>cnpm i element-ui -S
• 在main.js配置

// 导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 加载插件到Vue中，需要在创建Vue实例前加入
Vue.use(ElementUI)

• 然后即可在当前Vue项目中使用ElementUI