zoukankan      html  css  js  c++  java
  • vue2项目使用axios发送请求

    前言:在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。

    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,下面来具体介绍一下axios的使用。

    项目中安装axios

    cnpm install axios -S

    每个需要请求的组件中都需要引入axios,如果觉得麻烦,可以axios改写成Vue的原型属性,在使用的时候,就不需要每个组件都去引用。

    将axios改写成Vue的原型属性

    1、在main.js中引入axios

          import axios from 'axios'

    2、写成vue的原型属性

      Vue.prototype.$http = axios

    在main.js中添加这两行代码之后,就能直接在组件中使用axios了

    使用方式

    this.$http.post(url,params).then(function (response) {
      //请求成功
    }).catch(function (error) {
      //请求失败
    });

    实际应用

    假设我们需要请求的接口是:http://www.liuliangu.cn:8067/index/data/

    如果是开发环境,我们请求的接口如果存在跨域问题,需要配置代理

    在vue-cli的config文件下面的index.js里有一个参数叫proxyTable

    配置proxyTable的时候本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。

    具体配置代码:

    // 配置代理
    proxyTable: {
      '/api':{ // api为匹配项
        target:'http://www.liuliangu.cn:8067', // 设置代理目标
        changeOrigin: true,
        pathRewrite: { // 重写路径
          '^/api': '/'
        }
      }
    }

    组件中请求的具体代码:

    this.$http.post('/api/index/data/', qs.stringify({
      jobName: 'getSiteProductAnalysis',
      DateType: this.DateType
    })).then(function (response) {
      console.log(response)
    }).catch(function (error) {
      console.log(error);
    });

    注意

    在vue2中使用axios,我们请求的参数仍为json类型,是并没有序列化的。我们需要使用querystring解决该问题

    需要先引入  import qs from 'qs';

    传入参数的时候转下格式,qs.stringify(data)

    这样,我们就能正常请求访问到数据了。

    生成环境下,生产代码应该使用npm run build然后把dist放到nginx服务器上,在nginx上配置代理地址。

     

    
    
  • 相关阅读:
    diary and html 文本颜色编辑,行距和其它编辑总汇
    bash coding to changeNames
    virtualbox ubuntu 网络连接 以及 连接 secureCRT
    linux 学习6 软件包安装
    linux 学习8 权限管理
    vim 使用2 转载 为了打开方便
    ubuntu
    linux 学习15 16 启动管理,备份和恢复
    linux 学习 14 日志管理
    linux 学习 13 系统管理
  • 原文地址:https://www.cnblogs.com/ylqf/p/7449543.html
Copyright © 2011-2022 走看看