如何将Vue项目与Axios请求结合实现高效数据获取？

本文共计954个文字，预计阅读时间需要4分钟。

目录

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

二、在data中将将要使用的数据给一个初始值

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

四、传递数据

五、封装axios拦截器

六、一般vue项目中使用axios

目录

• 一、首先导入用到的组件和axios
• 二、在data中将要用到的数据给一个初始值，为空
• 三、在methods中写方法，发送axios获取数据
• 四、传递数据
• 五、封装 axios
• axios拦截器

一般vue项目中 一个页面是由多个组件组成的，各个组建的数据都是统一在主界面的组件中发送axios请求获取，这样极大地提高了性能。

一、首先导入用到的组件和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()   } }

四、传递数据

<div>   <home-header></home-header>   <home-swiper :list="swiperList"></home-swiper>   <home-icons :list="iconList"></home-icons>   <home-recommend :list="recommendList"></home-recommend>   <home-weekend :list="weekendList"></home-weekend> </div>

五、封装 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返回如下情况为权限有问题，登出并返回到登录页   * 如通过xmlapi-dev"', //修改为'"api-prod"'就行了     APP_ORIGIN: '"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

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