vue使用axios,进行网络请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.首先自己创建一个组件:

https://www.cnblogs.com/fps2tao/p/9559291.html

2.安装:axios(可以npm安装,也可以下载js引入文件)

npm install -g vue-cli

npm install axios -S

-D 等价于 --save-dev
-S 等价于 --save

3.在组件(Hi)中引入axios,并使用axios进行请求 [get请求不同域,有跨域提示]

<template>
    <div>Hi~~{{msg}}--{{data}}
        <button @click="send">发送AJAX请求</button>
    </div>
</template>
<script>
  import axios from \'axios\'
  export default {
    name: "Hi",
    data:function(){
      return {
        msg:\'wo 返回的值\',
        data:\'时间\'
      }
    },
    methods:{
      send(){
        axios({
          method:\'get\',
          url:\'http://jsonplaceholder.typicode.com/users\'
        }).then(function(resp){
          console.log(resp.data);
        }).catch(resp => {
          console.log(\'请求失败：\'+resp.status+\',\'+resp.statusText);
      });
      }
    }
  }
</script>
<style scoped>
</style>

4.Hi组件引入都App组件中,最后展示

相关阅读: https://www.cnblogs.com/xuanan/p/7847233.html

 参考:https://blog.csdn.net/it_cgq/article/details/78781422

参考:https://blog.csdn.net/sps900608/article/details/79599121

可以把axios设置一个全局变量,然后再调用

　　在main.js里面写

import axios from \'axios\'   // 1、在这里引入axios

Vue.prototype.$axios = axios;   // 2、在vue中使用axios

然后再组件的methods里面写事件直接使用:

      post1:function(){
        this.$axios.get(\'http://jsonplaceholder.typicode.com/users\').then(function (response) {
          console.log(response);
        });
      }

以上是 vue使用axios,进行网络请求 的全部内容， 来源链接： utcz.com/z/376841.html

回到顶部