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返回如下情况为权限有问题，登出并返回到登录页
? * 如通过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

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

查看更多关于vue项目及axios请求获取数据方式的详细内容...