vue集成axios封装请求

2023-05-24 09:05:53 124人浏览独家记忆

摘要

Vue 组件化的开发方式让我们的前端开发变得更加灵活、高效，而在这个过程中，与后端进行数据交互是不可避免的。而 AxiOS 是一个很好的数据请求框架，它提供了方便的api接口，使用简单、可靠、易于扩展等优点，于是我们选择把它集成到Vue项目

Vue 组件化的开发方式让我们的前端开发变得更加灵活、高效，而在这个过程中，与后端进行数据交互是不可避免的。而 AxiOS 是一个很好的数据请求框架，它提供了方便的api接口，使用简单、可靠、易于扩展等优点，于是我们选择把它集成到Vue项目中。在本文中，我们将介绍如何将 Axios 封装成实用的请求方法，便于在Vue组件中使用。

Axios 简介

一般来说，我们使用 Axios 发送请求会涉及以下三个步骤：

创建一个 Axios 实例：

// axios实例的默认配置
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/JSON'
  }
});

发送请求：

instance.get('/api/getUser', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

对请求结果进行响应：

instance.interceptors.response.use(res => {
  if (res.status === 200) {
    return res.data;
  } else {
    throw new Error(res.status);
  }
}, err => {
  throw new Error(err);
})

Axios 的使用非常简单明了，但是如果每次在 Vue 组件中使用时，都要重复编写这些代码，既费时又容易出错。所以，我们可以将其封装成一个通用的请求方法：

Axios 请求封装

我们可以采用 Promise 这种异步编程的方式，将 Axios 请求封装成通用方法，然后统一对返回的结果进行处理。

import axios from 'axios';

axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    if (localStorage.getItem('accessToken')) {
      config.headers.Authorization = localStorage.getItem('accessToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          // token过期，跳转到登录页
          break;
        case 404:
          // 请求资源不存在
          break;
        default:
          // 其他错误提示
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

export default function request(options) {
  return new Promise((resolve, reject) => {
    axios(options).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}

以上代码中，我们创建了一个 Axios 实例并设置其默认配置，同时也添加了请求和响应的拦截器。在封装的请求方法中，我们使用 Promise 来返回请求的结果。

请求拦截器中，我们可以将 Token 添加到请求头中，也可在此统一对请求进行定制化处理。
响应拦截器中，我们可以对响应结果进行特殊处理，如状态码错误的跳转，资源不存在的提示、或其他错误提示等。

请求方法使用

将 Axios 请求封装成通用方法后，我们就可以在 Vue 组件中使用它了，调用时只需要传递请求的基本参数即可：

import request from '@/utils/request';

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

同样，支持 GET、POST、PUT、DELETE、PATCH 等 Http 方法的请求，只需在参数中指定不同的方法即可。

request({
  url: '/api/user',
  method: 'post',
  data: {
    username: 'admin',
    passWord: '123456'
  }
});

request({
  url: '/api/user',
  method: 'put',
  params: {
    id: 123
  },
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'delete',
  params: {
    id: 123
  }
});