vue系列——数据请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

数据请求有两个问题，一个是工具选择，一个是代码组织问题

（一）工具选择

　　我看过一些别人写的项目，有直接用jquery提供的ajax接口，有自己封装了一个fetch接口，当然更多的是选择vue的第三方数据请求模块，说的最多的是vue-resource和axios；axios是目前最推荐的，但是我最终还是暂时选择了vue-resource，原因很简单，在国内还是有很多jsonp需求的，而后者不支持，原因很简单作者不喜欢jsonp，它认为这是一种跨域的hack方式，是不好的所以也没准备支持。

　　为了防止工具切换，我做了一个http的简单代理，也就是数据请求代码不直接调用第三方API，而是通过一个中间代理映射下方法，这样以后要换工具，也不至于苦逼的一个个替换接口。vue-resource的具体api直接参见它的github上的文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

　　关于vue-resource再补充一点： get请求如果要传参，写法是比较特殊的，是第二个参数的params属性，而不是直接第二个参数，写惯了jquery的容易采坑

vue.$http.get(\'getUserInfo.php\',{
        params:params
 })

　　具体参数写法人家写的很清楚了：

（二）代码组织

数据请求代码怎么写，我这里提供一种我自己实现的方案，抛砖引玉，如果你有更好的留言给我。

这是我的目录，数据请求相关模块几种在server里面

1. config

这个是全局配置文件，做了两件事情：全局路径配置（当然也还可以做些其它配置，比如header），代理http返回

import Vue from \'vue\'
import resource from \'vue-resource\'
Vue.use(resource);
Vue.http.options.root = \'http://web.11h5.com:4600\'
var vue = new Vue()
// vue.$http.options.emulateJSON = true;
//http代理对象
var http = {
	get:vue.$http.get.bind(vue.$http),
	post:vue.$http.post.bind(vue.$http),
	jsonp:vue.$http.jsonp.bind(vue.$http),
}
export default http

2. user-mock

这是个ajax劫持返回假数据测试的功能，参照mockjs

import Mock from \'mockjs\'
const root = \'http://web.11h5.com:4600/\'
var login = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    \'list|1-10\': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        \'id|+1\': 1
    }]
})
if(process.env.NODE_ENV !== \'production\'){
	Mock.mock( root + \'api\', login )
}

3. user

这个是具体的数据请求模块，我看到过有些项目把所有请求集中在一个文件，如果比较多实在太大，所以这里可以分开来，用户相关请求只在user里面

import http from \'./config\'
import \'./user-mock\'
var login = function(params){  
        return http.get(\'api\',{
        	params:params
        })
    }   
var getUserInfo = function(params){    	
        return vue.$http.get(\'getUserInfo.php\',{
        	params:params
        })
    }   
export default{
	login,getUserInfo
} 　　

最后，我们可以在vue组件中引入user模块做数据请求，或者在vuex的action中使用：

import * as types from \'../mutation-types\'
import httpUser from \'../../lib/server/user\'
// initial state
const state = {
  aa:\'aa\'
}
// getters
const getters = {
  aa: state => `from getters:${state.aa}`
}
// actions
const actions = {
  login ({ commit, state }, str) {
    httpUser.login().then(response =>{     
      commit(types.CHANGE_A, { str:JSON.stringify(response.body) })
    })
  }   
}
// mutations
const mutations = {
  [types.CHANGE_A] (state, { str }) {
    state.aa += str
  }
}

以上是 vue系列——数据请求 的全部内容， 来源链接： utcz.com/z/380753.html

回到顶部