zoukankan      html  css  js  c++  java
  • vue中axios的简单使用

    我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递

    现在的这篇是最简单的使用,后续会添加上来复杂的使用

    首先安装axios

    引入方式:
    $ npm install axios
    //使用淘宝源
    $ cnpm install axios
    //或者使用cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

      

    安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。

    为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。

    //main.js

    import axios from 'axios'
    Vue.prototype.$http = axios

    需要用到的地方
    简单的post的请求
    self.$axios.post(self.url, { page: self.cur_page }).then((res) => {
            /* alert(res.data.data.list);*/
            this.tableData = res.data.data.list;
            this.page_total = this.tableData.length;
          }, (res) => {
            console.log("失败");
          })
    

      简单的get请求

        mounted() {
          this.$http.get('../../../static/json/hotcity.json').then((res) => {
          this.hotcity = res.data.hotcity;
          }, (res) => {
          console.log("error");
         })
        }

      

  • 相关阅读:
    自娱自乐
    项目冲刺(2)-第二、第三天
    项目冲刺(2)-第一天
    Beta版本冲刺计划及安排
    第一章 构造过程抽象
    python 学习2
    python 学习1
    ionic 初入门
    NodeJS学习
    软件工程实践总结作业——个人作业
  • 原文地址:https://www.cnblogs.com/yesu/p/8693550.html
Copyright © 2011-2022 走看看