vue+element后台管理中request拦截数据在view页面中展示

嘿，朋友们，今天咱们聊聊前端开发中的拦截器，这玩意儿就像是你家的门卫，专门负责检查进出的人员（数据）。首先，我们得在service.interceptors.response.use中设置个拦截器，它会在数据进来时大喊一声：“喂，你谁啊？”然后检查一下response.data，确认无误后才放行。

接下来，你得在页面中引入request，就像是从工具箱里拿出你的小锤子，准备开工。然后呢，封装个login的接口方法，告诉它：“嘿，去user/login那儿，用post方式，把这些data送过去。”最后，在页面创建时调用这个方法，等待它带回数据，再把它打印出来，看看它长啥样。

这整个过程就像是你点外卖，拦截器就是你的门卫，检查外卖是否安全；request就是你的手机，用来下单；login方法就是你点的菜；最后的数据就是你期待已久的美味。如果门卫（拦截器）出了问题，那你的外卖可能就会出岔子，所以得确保它工作正常。懂了吗？下次点外卖，哦不，下次写代码时，记得好好设置你的拦截器哦！

1.拦截

service.interceptors.response.use(

response => {

console.log(response,"初始拦截");

const res = response.data;//拦截到的数据

return res;//返回拦截的数据

}

2.在页面中引入request:

import request from '@/utils/request'

3..在页面中封装接口方法：

export function login(data) {

  return request({

    url: 'user/login',

    method: 'post',

    data

  })

}

4..在页面中调用：

 async created() {

    // 调用

    let res = await login(data);

    console.log(res, "数据");

  },