前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >流媒体服务器前端展示框架vue封装api接口流程介绍

流媒体服务器前端展示框架vue封装api接口流程介绍

作者头像
EasyNVR
发布2020-04-23 14:02:16
8700
发布2020-04-23 14:02:16
举报
文章被收录于专栏:EasyNVR

今天我打算跟大家聊一下API封装,像我们使用VUE来进行流媒体服务器的展示框架的时候,几乎都会把API封装一下,不要小瞧了这个封装的步骤,有可能在后期为我们带来很大的便利,封装一方面是为了使代码更加规范,另一方面也是便于后期调整。本文就来讲一下vue封装api接口的流程。

1,本文使用axios请求,先在require中配置服务器请求拦截,并添加token,本文模拟token添加1111,域名使用的本地域名,需要自己配置一下,token可以使用cookie。

代码语言:javascript
复制
import axios from 'axios'

// 创建axios对象
let service = axios.create({
  baseURL: 'http://127.0.0.1:3001', // 请求接口的域名
  timeout: 9000 // 请求的超时
})

// 添加请求拦截器,
service.interceptors.request.use(
  request => {
    // 设置请求的头信息
    request.headers = {
      token: `1111`, // 请求添加的token
      'Content-Type': 'application/json;charset=utf-8'
    }
    return request
  },
  error => {
    Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Promise.reject(error)
  }
)

export default service

2,创建一个接口文件,统一把接口放入这个js中,使用时直接拿取,合理运用封装模块

代码语言:javascript
复制
// 所有接口地址
export default {
  exhibitionHotUrl: '/api/exhibition/list',
}

3,封装api,使用直接拿取api请求

代码语言:javascript
复制
import requset from '../utils/request'
import apiUrl from '../utils/apiUrl'

// 获取数据
export const getExhibitionList = params => {
  return requset({
    url: apiUrl.exhibitionHotUrl,
    method: 'get',
    params
  })
}
}

4,最后页面可以使用

代码语言:javascript
复制
//获取
import {getExhibitionList} from '../../api/index'

getExhibitionHotList = async () => {

  // await 调用
  const result = await getExhibitionList({
  可以在这里写需要传递的参数
  })
  if (result.code === 200) {
    this.setState({
    //成功数据赋值
      exhibitionList: result.data.list
    })
  }
}

这样封装api接口差不多就完成了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档