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

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

 

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

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中，使用时直接拿取，合理运用封装模块

// 所有接口地址
export default {
  exhibitionHotUrl: '/api/exhibition/list',
}

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

import requset from '../utils/request'
import apiUrl from '../utils/apiUrl'

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

4，最后页面可以使用

//获取
import {getExhibitionList} from '../../api/index'

getExhibitionHotList = async () => {

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

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