zoukankan      html  css  js  c++  java
  • vue小项目总结与笔记【六】——使用axios发送ajax请求

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

    安装:

    npm install axios --save

    引入:

    import axios from 'axios'

    使用:

    在methods里定义获取方法和成功后执行方法,在mounted生命周期钩子里执行获取方法

    methods: {
            // 获取方法
            getHomeInfo () {
                axios.get('/api/index.json?city=' + this.city)
                    .then(this.getHomeInfoSucc)
            },
            // 成功后执行的方法
            getHomeInfoSucc (res) {
                res = res.data
                if (res.ret && res.data) {
                    const data = res.data
                    this.swiperList = data.swiperList
                    this.iconList = data.iconList
                    this.recommendList = data.recommendList
                    this.weekendList = data.weekendList
                }
            }
        },
        // 一个生命周期钩子 HTMl挂载到页面完成后执行  一般用于ajax请求
        mounted () {
            this.lastCity = this.city
            this.getHomeInfo()
        }  

    前期自己模拟后端数据的时候(数据放在static/mock),需要修改一些参数:

    在config/index.js里找到dev里的proxyTable,作如下修改:

     proxyTable: {
          '/api': {
            // 请求api目录的时候,转发到'http://localhost:8080
            target: 'http://localhost:8080',
            // 路径替换  api => /static/mock/
            pathRewrite: {
              '^/api': '/static/mock/'
            }
          }
        }  
    
             //请求地址以api开头,就请求到本地的mock目录

    改动配置项后,需要重启服务器!

     
  • 相关阅读:
    vs2005 配置winpcap
    qt 解决中文乱码问题
    [翻译] QT正则表达式
    使用QSetting 读写ini文件
    [转]GNOME快捷键
    华为面试题之大整数相加
    qt 程序windows 上发布
    win7英文版中文乱码问题
    CURL命令 Alex
    Sendfile机制 Alex
  • 原文地址:https://www.cnblogs.com/Ashe94/p/10558104.html
Copyright © 2011-2022 走看看