Vue封装Axios请求和拦截器的步骤

下面是封装Vue的Axios请求和拦截器的步骤：

步骤一：安装Axios库

首先，需要将Axios库安装到Vue项目中。

使用npm安装：

npm install axios --save

或者使用yarn安装：

yarn add axios

步骤二：封装Axios请求

创建request.js文件，用于封装Axios请求。

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000', // 接口基础路径
  timeout: 5000, // 请求超时时间，默认5秒
})

export default request

在这个文件中，我们使用axios.create()方法创建了一个Axios实例，通过baseURL属性配置了接口的基础路径，这样每次发起请求的时候就不需要再写完整的路径了。我们还可以通过timeout属性设置请求超时时间，避免等待时间过长导致用户体验不佳。

步骤三：封装Axios拦截器

创建interceptor.js文件，用于封装Axios拦截器。

import request from './request'

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config
  },
  error => {
    // 对请求错误做处理
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response
  },
  error => {
    // 对响应错误做处理
    return Promise.reject(error)
  }
)

export default request

我们在这个文件中使用request.interceptors.request.use()方法和request.interceptors.response.use()方法，分别对请求和响应进行拦截处理。在这里，我们可以为请求添加一些header信息、请求成功后对响应数据进行处理、请求错误时处理等。

步骤四：应用封装后的Axios请求

使用封装后的Axios请求进行数据的请求。简单实现一个示例，从服务器获取用户列表：

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'UserList',
  data() {
    return {
      userList: [],
    }
  },
  created() {
    this.fetchUserList()
  },
  methods: {
    fetchUserList() {
      request.get('/user/list').then(response => {
        this.userList = response.data
      })
    },
  },
}
</script>

在这个示例中，我们使用request对象发起了一个GET请求，然后在.then()方法中处理响应结果，将响应的用户列表赋值给userList数组。这样我们就完成了使用封装后的Axios请求的过程。

另外一个示例：从服务器删除某个用户并重新获取用户列表。

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }}
        <button @click="deleteUser(user)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'UserList',
  data() {
    return {
      userList: [],
    }
  },
  created() {
    this.fetchUserList()
  },
  methods: {
    fetchUserList() {
      request.get('/user/list').then(response => {
        this.userList = response.data
      })
    },
    deleteUser(user) {
      request.delete(`/user/${user.id}`).then(() => {
        this.fetchUserList()
      })
    },
  },
}
</script>

在这个示例中，我们在每个用户的后面添加了一个“删除”按钮。当用户点击该按钮时，我们通过request.delete()方法删除该用户，并在删除成功后重新获取用户列表，实现了数据删除和刷新的功能。

以上就是本次的完整攻略，希望能对你有所帮助。