vux ajax请求及跨域

1）使用 AjaxPlugin 插件（在组件里使用）

引入插件

import { AjaxPlugin } from 'vux'

初始化

export default {
  components: {
    AjaxPlugin
  },
  data () {
    return {
    }
  }
}

封闭一个方法方便调用（正式使用时，你应该还需要计算签名之类的操作）

function htttpRequest (url, params, cb) {
  let dataStr = ''
  for (let key in params) {
    dataStr += key + '=' + params[key]
  }
  dataStr = dataStr.substr(0, dataStr.length - 1)

  AjaxPlugin.$http.post(url, dataStr)
  .then((response) => {
    if (cb) cb(response.data)
  })
}

使用示例

export default {
  components: {
    AjaxPlugin
  },
  data () {
    return {
      articleList: this.getArticleList(1)
    }
  },
  methods: {
    getArticleList: function (catId) {
      let _this = this

      htttpRequest('/api', {method: 'article.getList', 'catId': catId}, function (data) {
        _this.articleList = data.Result.ArticleList
      })
      return []
    }
  }
}

这里示例写的是初始化时，默认调用一次，你可以在相应的按钮上点击事件再调用此函数

2）关于跨域（用nodejs代理转发请求）

如果你有注意，应该会发现，上面请求写的 url 是 '/api' ，这不是一条确切的接口地址，假设你的域名为 http://localhost:8080，那么它请求的地址即为 http://localhost:8080/api

这个 /api 默认是不存在的，现在我们配置一下 nodejs ，让它为我们转发请求

假设，我需要请求的接口的入口为 http://www.xxx.com/api

修改 /config/index.js 配置文件，修改 dev 选项下 proxyTable 的值为如下

proxyTable: {
    '/api': {
        target: 'http://www.xxx.com/',
        changeOrigin: true
    }
},

PS：这里使用的是一个叫 http-proxy-middleware 的 nodejs 中间件，系统已默认为我们集成，直接配置就好了

上面的配置的意思是：遇到以 '/api'开关的 http 请求，自动转化到 target （目标）url 地址去，实际请求地址就是 target + '/api'

需要注意的是，假设，你需要请求的接口的入口为 http://www.xxx.com/rest，而代码里请求的 url 写的是 '/api'，则你需要使用 pathRewrite 来进行路径重写，而不是直接改 traget

proxyTable: {
    '/api': {
        target: 'http://www.xxx.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/rest'
        }
    }
},

下面是一个错误示范：

proxyTable: {
    '/api': {
        target: 'http://www.xxx.com/rest',
        changeOrigin: true
    }
},

这里实际请求的地址为：http://www.xxx.com/rest/api，很明显是错误的（当然，你也可以使用 pathRewrite 把 '/api' 改成 ''，也是可以的）

完

vux ajax请求 及 跨域

vux ajax请求及跨域