Vue中利用axios优雅处理Api请求

2023-09-10 01:43:16

在日常开发中，我们通常使用第三方库 axios 来处理 HTTP 请求。为了让代码更加优雅，我们可以对 axios 进行封装，并设置请求/响应的全局拦截。本文将介绍如何进行这些操作。

一、封装一个request.js

首先，我们在项目中创建一个名为 request.js 的文件，并在其中封装一个函数来处理 HTTP 请求。这个函数接收两个参数：url 和 data，分别表示请求的 URL 和请求的数据。函数内部使用 axios 库来发送请求，并返回一个 Promise 对象。

// request.js
import axios from 'axios'

export default function request(url, data) {
  return axios({
    url,
    data,
    method: 'post'
  })
}

二、使用axios进行网络请求

在 Vue 组件中，我们可以使用 request.js 来进行网络请求。例如，我们可以使用以下代码来获取用户列表：

// App.vue
import request from './request'

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    request('/api/user/list').then(res => {
      this.userList = res.data
    })
  }
}

三、设置请求/响应的全局拦截

为了方便地处理所有请求和响应，我们可以设置请求/响应的全局拦截。在 Vue 项目的 main.js 文件中，我们可以使用以下代码来设置拦截器：

// main.js
import axios from 'axios'

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 当请求出错时做些什么
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  // 在收到响应时做些什么
  return response
}, error => {
  // 当响应出错时做些什么
  return Promise.reject(error)
})