vue封装axios

1.首先引入axios

import axios from 'axios'

2.创建一个实例

const service = axios.create({
  baseURL: '', // 请求的公共地址
  timeout: 10000 // 请求超时时间，超过1秒，即取消请求
})

3.请求拦截器

在此过程可以给config添加一些token等一些对用户一个独特的标识等等操作

// 请求拦截器
service.interceptors.request.use(
  function (config) {
    // 在发送请求之前做什么
    // 在这个过程中可以给config设置token等一些对用户的表示等等操作
    // 这里做了个请求过程中，一个加载动画
    showFullScreenLoading()
    // 将config请求信息返回出去，不返回则无法继续执行
    return config
  },
  function (error) {
    // 对请求错误做什么
    // 抛出错误
    return error
  }
)

4.相应拦截器
此过程可以给数据添加一些返回值code，例如400，200…

// 响应拦截器
service.interceptors.response.use(
  function (response) {
    // 发送请求后做什么
    hideFullScreenLoading()
    return response
  },
  function (error) {
    // 请求错误之后做什么
    hideFullScreenLoading()
    return error
  }
)

5.判断数据成功与否

// 此处的req接受到的就是api接口的信息
export default function request (req) {
  return new Promise((resolve, reject) => {
    service(req).then(response => {
      // response返回的数据
      const resp = response.data
      if (resp.code) {
        // 通过code值，确定是否成功
        if (resp.code === 20000) {
          resolve(resp.data)
        } else {
          // 如果不带code值的返回则直接发送数据处理器
          resolve(response.data)
        }
      }
    }).catch((response) => {
      // 抛出错误
      console.log('response')
      const error = 111
      reject(error)
    })
  })
}

6.此处是使用了loading，在接口调用时，还没结束，就会有loading的动画

封装loading是写在了另一个页面

import { showFullScreenLoading, hideFullScreenLoading } from './loading'

import { Loading } from 'element-ui'

let resquestCount = 0
let loading

export const showFullScreenLoading = () => {
  if (resquestCount === 0) {
    loading = Loading.service({
      lock: true,
      text: '加载中……',
      background: 'rgba(0, 0, 0, 0.7)'
    })
  }
  resquestCount++
}

export const hideFullScreenLoading = () => {
  if (resquestCount <= 0) return
  resquestCount--
  if (resquestCount === 0) {
    loading.close()
  }
}

7.写接口api

import axios from '../utils/service'

export const getMenu = (params) => {
  return axios({
    url: '/permission/getMenu',
    method: 'post',
    data: params
  })
}

8.调用接口

调用接口前先导入，使用的是async await

import { getMenu } from '@/api/data'

this.$refs.loginForm.submitForm(async (valid) => {
        if (valid) {
           const userNews = await getMenu(this.loginData)
          this.$store.commit('clearMenu')
          this.$store.commit('setMenu', userNews.data.data.menu)
          this.$store.commit('setToken', userNews.data.data.token)
          this.$store.commit('addMenu', this.$router)
          this.$router.push({ name: 'welcome' })
        } else {
          this.$message.error('请填写完整')
        }
      })