Vue API接口的二次封装

一 、新建目录文件结构

• index.js (对外暴露接口请求)

import requests from './request.js'
import mockreqursts from './mockrequest.js'

//获取三级联动数据
export const reqCategoryList = ()=>requests({url:'/product/getBaseCategoryList',method:'get'})

//获取轮播图数据
export const reqBanner = ()=>mockreqursts({url:"/banner",method:'get'})

• request.js （接口请求封装）

import store from '@/store';
import axios from 'axios'
import nprogress from 'nprogress'
import "nprogress/nprogress.css"
const requests = axios.create({
  baseURL: "/api",
  timeout: 5000,
});
//获取数据
requests.interceptors.request.use((config)=>{
  //uuid请求头识别添加商品购物车信息
  if(store.state.Detail.uuid_token){
    config.headers.userTempId = store.state.Detail.uuid_token
  }
  //token登录请求头
  if(store.state.User.token){
    config.headers.token = store.state.User.token
  }
  nprogress.start()
  return config
})
//发送数据
requests.interceptors.response.use((res)=>{
  nprogress.done()
  return res.data;
},(error)=>{
  return Promise.reject(new Error('faile'+ error))
})

export default requests

二 、在 main.js 中全局配置引入serve

import * as serve from '@/api'
Vue.prototype.$API = serve

//或者在vue中挂载
new Vue({
    beforeCreate() {
        Vue.prototype.$API = serve
    },
    render: h => h(App),
    router,
    store
}).$mount('#app')

三 、使用接口获取数据

method:{
    async getapidata(){
        const result = await this.API.reqBanner()
        //const result = await this.API.模块名.reqBanner()
    }
}