Vue专题（六）axios封装及接口调用

1. axios封装

安装axios

npm install axios -s

在根目录的 src 文件夹下新建一个 utils文件夹，接着在 utils文件夹下新建 request.js 文件

/**
 * @description axios 请求封装
 * @author xzp
 */
import axios from 'axios'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 90000
})
// 默认请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 'application/json'
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    const { url } = config
    if (url.indexOf('login') > -1 || url.indexOf('logout') > -1) {
      return config
    } else {
      const token = getToken()
      if (token) {
        config.headers['token'] = token
      }
      return config
    }
  },
  (error) => {
    // 请求发生错误
    console.log(error)
    return Promise.reject(error)
  }
)
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (response.status === 200) {
      if (res.status !== 0) {
        return Message({
          message: res.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        return Promise.resolve(res)
      }
    } else {
      return Promise.reject(new Error(res.msg))
    }
  },
  (error) => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2. 接口调用封装

在根目录的 src 文件夹下新建一个 api 文件夹，接着在 api 文件夹下新建 formDef.js 文件（注意：api文件夹下可以根据实际的接口情况创建多个js接口文件）

安装qs（qs主要用于参数序列化，处理发送请求的参数）

npm install qs

/**
 * @description 工作流相关地址
 * @author xzp
 */

import request from '@/utils/request'
import qs from 'qs'

/**
 * 添加form
 *
 * @export
 * @return {*}
 */
export function formDefAdd(data) {
  return request({
    url: 'formDef/add',
    method: 'POST',
    data: data,
    headers: { 'Content-Type': 'application/json' } // 请求头
  })
}

/**
 * 查询form
 *
 * @export
 * @return {*}
 */
export function formDefQuery(data) {
  return request({
    url: 'formDef/query',
    method: 'POST',
    data: qs.stringify(data)
  })
}

3. 使用封装后的接口

import { formDefQuery } from '@/api/formDef'
export default {
  name: 'TabForm',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const { status, data } = await formDefQuery({
        taskID: 'Activity_1o3t03u'
      })
      console.log(status, data)
      if (status === 0) {
        this.message = data
      }
    }
  }
}