vue集成axios封装请求

百变鹏仔 2个月前 (10-31) #前端问答

文章标签 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 来返回请求的结果。

立即学习“前端免费学习笔记（深入）”；

请求方法使用

将 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  }});

结语

本文通过 Axios 在 Vue 项目中的集成和封装，详细讲解了如何封装 Axios 请求方法。这种封装方式可以大大减少重复代码的编写量，提高开发效率，同时也便于对请求结果进行统一处理。在使用中，我们可以将其配置及拦截器按需调整、扩展，以满足不同的需求。

文章推荐

vue集成axios封装请求

Axios 简介

Axios 请求封装

请求方法使用

结语

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗