首页 > 代码库 > vue系列——数据请求

vue系列——数据请求

2024-09-10 09:19:30   215人阅读

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

（一）工具选择

　　我看过一些别人写的项目，有直接用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 stateconst state = {  aa:‘aa‘}// gettersconst getters = {  aa: state => `from getters:${state.aa}`}// actionsconst actions = {  login ({ commit, state }, str) {    httpUser.login().then(response =>{           commit(types.CHANGE_A, { str:JSON.stringify(response.body) })    })  }   }// mutationsconst mutations = {  [types.CHANGE_A] (state, { str }) {    state.aa += str  }}

　　

 

vue系列——数据请求


联系
我们