vue-resource拦截接口,模拟数据

目前用vue-cli3完成一个小项目，后端把接口定义好了，传递参数，返回参数等等，但是还没有开发完成，一般我们都是本地在代码里面返回一个json数据，没有使用接口。等到后端接口上线后，才把请求等数据放进去。

这次由于小项目所有使用的是vue-resource发送请求，利用里面的拦截器实现对请求url的判断，返回对应的数据（其中可以根据自己传递的参数，返回不同的结果。）；

下面是我的项目结构

image.png

test文件夹是我用来放返回数据的文件夹，其中有一个test.js是我用来拦截接口返回的本地数。（但是如果接口多可以多个js，各自完成各自的接口数据，最后倒入到统一个js里面。我这里试验一个就行了。）

1.test.js

// 第一个接口返回
function jiekou1(obj){
  return {
    name: obj.name,
    age: 14
  }
}
// 第二个接口返回
function jiekou2(list){
  return list.map((v)=>{
    return v+"同学"
  })
}

// 第三个接口返回
function jiekou3(list){
  return list.map(v=>{
    if(v.age>18){
      return v
    }
  })
}

export default {
  jiekou1,
  jiekou2,
  jiekou3
}

---

*在这里我模拟了三个后端接口，当然有点简单，里面自己可以完成自己的逻辑，模拟后台返回数据。

2.main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import store from './store'
import VueResource from 'vue-resource'
import resData from '../test/test'

Vue.config.productionTip = false

Vue.config.devtools = true

Vue.use(VueResource)
Vue.use(Vuex)



Vue.http.interceptors.push(function(request, next) {
    console.log('request', request)
    // 判断request.url 觉得返回的时候返回那个数据
    console.log('resData',resData)
    var fn = resData.jiekou1(request.params);

    // 可以用一个js来管理所有的路径对应的resData里面的方法
    /* if(request.url == 'jjjjskdjklfajsdkl'){
          fn = resData.params
    } */
    next(() => {      
        var obj = {
          body: fn,
          bodyText: JSON.stringify(fn),
          headers: '',
          ok: true,
          status: 200,
          statusText: "OK",
          url: request.url
        }
        return obj;
    })
})

router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
});

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

---

• 在这里通过resData返回了所以的模拟结果函数，通过拦截器Vue.http.interceptors 拦截请求 request.url判断当前请求的url是什么，返回对应的处理函数。（url多的话，用一个js统一管理）。
• 然后函数里面的参数,在发送请求的时候，把参数传递进来就好。 最后next返回函数。

3 实际使用

methods: {
    test(){
      console.log('开始')
      // 后端接口 http://www.test.com  还没有开发好
      this.$http.get('http://www.test.com', { params: { name: '张三' } ).then(res=>{
        console.log('获取拦截结果',res)
      })
    }
}

• 在需要使用请求的vue页面中，发送数就好，接口就是后端定义的接口，然后，参数就像 我写的栗子。就可以返回接口了。

贴图

image.png

• 控制台可以看到已经取到了数据，之后就可以顺利进行自己的开发了。