vue中API接口的管理

1. 新建api文件 --> 新建reques.js文件

import axios from 'axios'
import {
  Message,
  Loading
} from 'element-ui'
import router from '../router/index.js'  //注意路径与文件名

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 50000 // request timeout
})

let loading // 定义loading变量

function startLoading () { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

function endLoading () { // 使用Element loading-close 方法
  loading.close()
}

// 请求拦截  设置统一header
service.interceptors.request.use(
  config => {
    // 加载
    startLoading()
    if (localStorage.eleToken) {
      config.headers.Authorization = localStorage.eleToken
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截  401 token过期处理
service.interceptors.response.use(
  response => {
    endLoading()
    return response
  },
  error => {
    // 错误提醒
    endLoading()
    Message.error(error.response.data)

    const { status } = error.response
    if (status === 401) {
      Message.error('token值无效，请重新登录')
      // 清除token
      localStorage.removeItem('eleToken')

      // 页面跳转
      router.push('/login')
    }

    return Promise.reject(error)
  }
)

export default service

在request.js中做了三件事

创建axios，设置baseURL与超时时间

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 50000 // request timeout
})

拦截请求

service.interceptors.request.use(
  config => {
    // 加载
    startLoading()
    //此处可统一设置请求头 ....
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

拦截响应

service.interceptors.response.use(
  response => {
    endLoading()
    return response
  },
  error => {
    // 错误提醒
    endLoading()
    Message.error(error.response.data)
   //此处可对状态码做一个判断
   // 跳转回登录界面
    //router.push('/login')
    }

    return Promise.reject(error)
  }
)

2.新建api.js 引入request文件

//api.js
import request from '@/utils/request'
export default {
    api名(接口参数) {
        return request.get(接口地址与字段)
    },
}

3.新建index.js文件引入axios、vue与api.js文件

添加对应实例可用this.$引用

import axios from "axios"
import Vue from "vue"
import dataTableApi from "./dataTable/dataTableApi"

Vue.prototype.$http = {...dataTableApi}
Vue.prototype.$axios = axios

4.在组件中通过this.$http.接口名(参数名) 即可调用

vue中API接口的管理

猜你喜欢