【vue】对axios进行封装以及接口api的封装

对于axios进行封装，可以用以下步骤：

1. 安装axios依赖：在项目根目录下运行 `npm install axios --save` 命令。

2. 创建一个axios实例：在src目录下创建一个api.js文件，在其中编写如下代码：

   import axios from 'axios'

   // 创建axios实例
   const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // api的base_url
     timeout: 5000 // 请求超时时间
   })

   // request拦截器
   service.interceptors.request.use(
     config => {
       // 在发送请求之前做些什么
       return config
     },
     error => {
       // 对请求错误做些什么
       console.log(error) // for debug
       Promise.reject(error)
     }
   )

   // respone拦截器
   service.interceptors.response.use(
     response => {
       /**
        * code为非20000是抛错 可结合自己业务进行修改
        */
       const res = response.data
       if (res.code !== 20000) {
         Message({
           message: res.message,
           type: 'error',
           duration: 5 * 1000
         })
         return Promise.reject('error')
       } else {
         return response.data
       }
     },
     error => {
       console.log('err' + error) // for debug
       Message({
         message: error.message,
         type: 'error',
         duration: 5 * 1000
       })
       return Promise.reject(error)
     }
   )

   export default service

在axios实例中，我们可以设置baseURL、timeout等属性，并且可以使用拦截器来拦截请求和响应，实现一些全局处理逻辑。

3. 在需要使用axios的地方引入api.js文件，例如在vue组件中：

   import request from '@/utils/api'

   export default {
     data() {
       return {
         list: []
       }
     },
     methods: {
       getData() {
         request({
           url: '/api/list',
           method: 'get'
         }).then(response => {
           this.list = response.data
         }).catch(error => {
           console.log(error)
         })
       }
     }
   }

在组件中使用request函数来发送请求，可以通过设置请求方法、url、参数等来发送请求，然后通过then方法来处理响应结果。

接口api的封装，可以将所有对后端的请求都统一管理，减少重复代码。可以在src目录下创建一个api文件夹，然后在其中创建一个index.js文件，编写如下代码：

import request from '@/utils/api'

export function getList(params) {
  return request({
    url: '/api/list',
    method: 'get',
    params
  })
}

export function addData(data) {
  return request({
    url: '/api/add',
    method: 'post',
    data
  })
}

export function updateData(data) {
  return request({
    url: '/api/update',
    method: 'post',
    data
  })
}

export function deleteData(id) {
  return request({
    url: '/api/delete',
    method: 'post',
    params: { id }
  })
}

在这个文件中，我们可以将所有的请求函数都定义在这里，并且通过导出的方式暴露出来，这样在组件中就可以直接引入这些函数来发送请求了。例如：

import { getList, addData, updateData, deleteData } from '@/api'

export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    getData() {
      getList().then(response => {
        this.list = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    add() {
      addData({ name: 'test', age: 20 }).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    update() {
      updateData({ id: 1, name: 'test', age: 25 }).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    del(id) {
      deleteData(id).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在组件中直接调用api.js中定义的函数，就可以完成对后端接口的请求了。