Vue项目中封装axios的方法

下面我来详细讲解一下“Vue项目中封装axios的方法”的完整攻略。

为什么要封装axios？

首先，我们需要知道为什么要封装axios。axios是一个非常好用的第三方库，但是在很多情况下，我们需要对axios进行一些封装才能更好地满足我们的需求。主要有以下几点原因：

1. 方便统一处理请求异常、错误提示、请求头等
2. 方便设置全局loading效果
3. 方便在请求前和请求后进行拦截操作
4. 方便给每个请求设置默认的请求参数等

因此，我们需要对axios进行一些封装，以便我们更好地使用它。

封装axios的方法

封装axios的方法有很多种，这里介绍一种常用的方法。

1. 创建一个axios实例

首先，我们需要通过axios.create方法创建一个axios实例。这个实例可以对axios的默认配置进行自定义，并可以设置拦截器等。

import axios from 'axios'

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

export default service

2. 添加请求拦截器

我们可以通过添加请求拦截器，在请求发送前做一些处理，比如设置请求头，添加loading效果等。

// request拦截器
service.interceptors.request.use(
  config => {
    // 添加请求头
    config.headers['Authorization'] = getToken()
    // 显示loading效果
    Loading.service({
      fullscreen: true
    })
    return config
  },
  error => {
    // 处理请求错误
    console.log(error)
    Promise.reject(error)
  }
)

3. 添加响应拦截器

在接收到响应后，我们可以通过添加响应拦截器，对响应数据做一些处理，比如统一处理错误提示等。

// respone拦截器
service.interceptors.response.use(
  response => {
    // 隐藏loading效果
    Loading.service({
      fullscreen: true
    }).close()
    const res = response.data
    if (res.code !== 200) {
      // 统一处理错误提示
      MessageBox.alert(res.message, '错误提示', {
        confirmButtonText: '确定',
        type: 'error'
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    // 处理响应错误
    Loading.service({
      fullscreen: true
    }).close()
    console.log('err' + error) // for debug
    MessageBox.alert(error.message, '错误提示', {
      confirmButtonText: '确定',
      type: 'error'
    })
    return Promise.reject(error)
  }
)

4. 封装get和post请求方法

在axios实例上可以封装我们常用的请求方法，如get、post等。

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

export function post(url, data) {
  return service({
    url: url,
    method: 'post',
    data: data
  })
}

示例说明

下面是两个示例，分别演示了如何使用封装的axios方法：

示例1：获取用户信息

import { get } from '@/utils/request'

export function getUserInfo() {
  return get('/user/info')
}

在getUserInfo方法中，我们使用了封装的get方法，这个方法会自动发送一个get请求到 /user/info 路径，并返回请求结果。

示例2：提交表单数据

import { post } from '@/utils/request'

export function submitForm(data) {
  return post('/form/submit', data)
}

在submitForm方法中，我们使用了封装的post方法，这个方法会自动发送一个post请求到 /form/submit 路径，并将表单数据作为请求体发送。

好了，以上就是Vue项目中封装axios的方法的完整攻略，希望对你有帮助！