zoukankan      html  css  js  c++  java
  • axios 基本运用

    axios是专门对ajax请求进行封装的一个插件,其返回一个promise对象,用法跟ES6的promise很相似

    一、安装axios插件
    npm install axios


    二、引入axios插件

    在main.js中引入,如下:

    import axios from 'axios'

    Vue.prototype.$http = axios; // 通过原型链的方式这样就可以在任何组件下调用axios


    三、在代码中执行请求,没有配置请求方式时默认为GET请求

    (1)执行GET请求

    this.$http.get("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
            params: {
              ID: 459
            }
          })
          .then(response => {
            this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默认为第一个系列的第一张图片
            this.goods_name = response.data.Sub[460].File[0].Name;
            this.goods_style = response.data.Sub[460].File[0].Desc;
          })
          .catch(function(error) {
            console.log(error);
          });
        }


    (2)执行POST请求

    this.$http.post("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
            params: {
              ID: 459
            }
          })
          .then(response => {
            this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默认为第一个系列的第一张图片
            this.goods_name = response.data.Sub[460].File[0].Name;
            this.goods_style = response.data.Sub[460].File[0].Desc;
          })
          .catch(function(error) {
            console.log(error);
          });
        }

    如果报错:ReferenceError: $http is not defined"

    需要安装vue-resource插件,然后在main.js中引入:

    import vueResource from 'vue-resource';
    Vue.use(vueResource);


    四、执行多个并发请求(同时执行多个请求语句)

    function getUserAccount() {
      return axios.get('/user/1244');
    }

    function getUserPromise() {
      return axios.get('/user/666/promise');
    }

    axios.all([getUserAccount(), getUserPromise()])
    .then(axios.spread(function(acct, perms){
      // 两个请求都完成时才走到这里来,跟ES6的Promise.all()一样的原理
    }));

  • 相关阅读:
    Java ConcurrentModificationException 异常分析与解决方案
    android studio 怎么做屏幕适配?
    java Class.getSimpleName() 的用法
    LeetCode——Remove Element
    用WidgeDuino创建一个SCADA(监控与数据採集)系统
    【Oracle】OCR的备份和恢复之导出导入
    Java大数类介绍
    POJ 1113 Wall 凸包
    OPENCV中滑动条的使用
    Android
  • 原文地址:https://www.cnblogs.com/secretAngel/p/9706083.html
Copyright © 2011-2022 走看看