• 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上配置代理地址。

  • 相关阅读:
    iOS之App Store上架被拒Legal
    iOS之解决崩溃Collection <__NSArrayM: 0xb550c30> was mutated while being enumerated.
    iOS之延时执行(睡眠)的几种方法
    iOS之UILabel的自动换行
    iOS之开发中一些相关的路径以及获取路径的方法
    iOS之绘制虚线
    iOS之判断手机号码、邮箱格式是否正确
    iOS之计算上次日期距离现在多久, 如 xx 小时前、xx 分钟前等
    iOS之开发中常用的颜色及其对应的RGB值
    method invocation
  • 原文地址:https://www.cnblogs.com/cpqwebfe/p/7686311.html
Copyright © 2020-2023  润新知