您现在的位置是：网站首页> 编程资料编程资料

vue项目及axios请求获取数据方式_vue.js_

2023-05-24 354人已围观

简介 vue项目及axios请求获取数据方式_vue.js_

一、首先导入用到的组件和axios

import HomeHeader from './components/Header' import HomeSwiper from './components/Swiper' import HomeIcons from './components/Icons' import HomeRecommend from './components/Recommend' import HomeWeekend from './components/Weekend' import axios from 'axios' export default {   name: 'Home',   components: {     HomeHeader,     HomeSwiper,     HomeIcons,     HomeRecommend,     HomeWeekend   },

二、在data中将要用到的数据给一个初始值，为空

  data () {     return {       swiperList: [],       iconList: [],       recommendList: [],       weekendList: []     }   },

三、在methods中写方法，发送axios获取数据

methods: {     getHomeInfo () {       axios.get('/api/index.json')         .then(this.getHomeInfoSucc)     },     getHomeInfoSucc (res) {       res=res.data       if (res.ret && res.data) {         const data = res.data         this.swiperList = data.swiperList         this.iconList = data.iconList         this.recommendList = data.recommendList         this.weekendList = data.weekendList       }     }   },   mounted () {     this.getHomeInfo()   } }

四、传递数据

五、封装 axios

通过简单的配置就可以本地调试线上环境，这里结合业务封装了axios 。

import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // 创建axios实例 const service = axios.create({   baseURL: process.env.BASE_API, // api的base_url   timeout: 5000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use(config => {   // Do something before request is sent   if (store.getters.token) {     config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改   }   return config }, error => {   // Do something with request error   console.log(error) // for debug   Promise.reject(error) }) // respone拦截器 service.interceptors.response.use(   response => response,   /**   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中   */   //  const res = response.data;   //     if (res.code !== 20000) {   //       Message({   //         message: res.message,   //         type: 'error',   //         duration: 5 * 1000   //       });   //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;   //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {   //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {   //           confirmButtonText: '重新登录',   //           cancelButtonText: '取消',   //           type: 'warning'   //         }).then(() => {   //           store.dispatch('FedLogOut').then(() => {   //             location.reload();// 为了重新实例化vue-router对象 避免bug   //           });   //         })   //       }   //       return Promise.reject('error');   //     } else {   //       return response.data;   //     }   error => {     console.log('err' + error)// for debug     Message({       message: error.message,       type: 'error',       duration: 5 * 1000     })     return Promise.reject(error)   }) export default service

使用

import request from '@/utils/request' export function getInfo(params) {   return request({     url: '/user/info',     method: 'get',     params   }); }

后台项目每个请求都是要带 token 来验证权限的，封装之后就不用每个请求都手动来塞 token，或者来做一些统一的异常处理，一劳永逸。

而且因为api 是根据 env 环境变量动态切换的，如果以后线上出现了bug，我们只需配置一下 @/config/dev.env.js 再重启一下服务，就能在本地模拟线上的环境了。

module.exports = {     NODE_ENV: '"development"',     BASE_API: '"https://api-dev"', //修改为'"https://api-prod"'就行了     APP_ORIGIN: '"https://xxx.com"'  }

axios拦截器

通过request拦截器在每个请求头里面塞入token，好让后端对请求进行权限验证。

创建一个respone拦截器，当服务端返回特殊的状态码，我们统一做处理，如没权限或者token失效等操作。

import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // 创建axios实例 const service = axios.create({   baseURL: process.env.BASE_API, // api的base_url   timeout: 5000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use(config => {   // Do something before request is sent   if (store.getters.token) {     config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改   }   return config }, error => {   // Do something with request error   console.log(error) // for debug   Promise.reject(error) }) // respone拦截器 service.interceptors.response.use(   response => response,   /**   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中   */   //  const res = response.data;   //     if (res.code !== 20000) {   //       Message({   //         message: res.message,   //         type: 'error',   //         duration: 5 * 1000   //       });   //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;   //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {   //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {   //           confirmButtonText: '重新登录',   //           cancelButtonText: '取消',   //           type: 'warning'   //         }).then(() => {   //           store.dispatch('FedLogOut').then(() => {   //             location.reload();// 为了重新实例化vue-router对象 避免bug   //           });   //         })   //       }   //       return Promise.reject('error');   //     } else {   //       return response.data;   //     }   error => {     console.log('err' + error)// for debug     Message({       message: error.message,       type: 'error',       duration: 5 * 1000     })     return Promise.reject(error)   }) export default service

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章: