VueJs 搭建Axios接口请求工具

VueJs 搭建 Axios 接口请求工具可以分为以下几个步骤：

1. 安装 Axios

首先，在 VueJs 中使用 Axios 需要先安装 Axios 库。可以使用 npm 命令进行安装（前提是已经安装了 npm）：

npm install axios

2. 创建请求服务

可以在 Vue 项目中新建一个 services 文件夹，在其中创建 api.js 文件，使用 Axios 封装一个请求服务。

在这个文件中，需要先引入 Axios 库:

import axios from 'axios'

然后，定义请求服务的基本信息，包括请求的主机地址、请求超时时间等等。

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 请求的主机地址
  timeout: 5000 // 请求超时时间
})

接下来，是封装一个 get 请求的示例代码：

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

这里的 getList 就是请求服务的函数名，params 是一个对象，包含了发送给后台的所有参数。service对象是之前通过 Axios.create() 方法创建的。

其中，url 表示请求地址，method 表示请求方式（get 或 post）。具体的请求参数放在 params 对象中。

3. 使用请求服务

使用请求服务有很多种方式，在 Vue 项目中可以在需要使用请求服务的组件中引入 apis.js 文件，调用 getList 方法进行数据请求：

import { getList } from '@/services/api.js'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData() {
      const params = { page: 1, pageSize: 10 }
      getList(params).then(response => {
        this.list = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在这个示例中，我们首先引入了 apis.js 中的 getList 方法，然后在 mounted 钩子函数中调用 getListData 方法请求数据。

getListData 方法中，我们定义了请求数据的参数对象 params，然后调用 getList(params) 方法，使用 Promise 的方式获取到请求的数据，并将数据赋值给 this.list。

4. 处理错误信息

Axios 在请求时，可能会返回错误信息。我们需要对错误信息进行处理，例如使用 catch 方法对错误进行捕获，然后进行错误提示:

getList(params).then(response => {
  this.list = response.data
}).catch(error => {
  console.log(error)
  Message.error(error.message)
})

这里使用了 Element UI 的 Message 组件进行错误提示。

另一种处理错误信息的方式是，在我们封装的请求方法中使用 interceptors 对错误进行处理：

service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    console.log(`err${error}`) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

这里使用了 Axios 的拦截器（interceptors）来拦截响应（response）和错误信息（error），并进行处理。

以上就是使用 VueJs 和 Axios 搭建接口请求工具的完整攻略了，其中包含了基本的请求服务、使用请求服务、处理错误信息的步骤。通过这个教程，你可以了解到如何使用 VueJs 和 Axios 来发起 API 请求。