vue 中 axios 封装及使用

最新推荐文章于 2024-07-25 22:35:58 发布

lvan找不到bug

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量450

点赞数

分类专栏： Vue JS 文章标签： axios vue

本文链接：https://blog.csdn.net/l508742729/article/details/107566404

版权

在Vue开发中，通常使用Axios作为与后端交互的数据库，因为其基于Promise并支持浏览器和Node.js环境。Axios提供拦截器、取消请求、JSON转换和XSRF防护等功能。为了统一管理接口API，进行了Axios的二次封装，封装后的API文件代码简洁易用，并提供了使用示例。

摘要由CSDN通过智能技术生成

在开发vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

此处根据项目需要对axios进行了二次封装，以便于对接口api进行统一管理，封装的 api文件内容代码如下：

const Axios = require('axios')
const METHODS = {
  GET: 'get',
  POST: 'post',
  PUT: 'put',
  DELETE: 'delete'
}

// 响应拦截器处理数据，接口响应状态正常时数据对象会多一层data包含响应数据
Axios.interceptors.response.use(data => {
  return data
}, error => {
  console.log('响应拦截器事件error', error.response)
  return Promise.reject(error.response)
})

// 接口地址 / 请求参数 / 请求方式 / 请求头信息
const request = (url, params = {}, method = METHODS.GET, headers = {}) => {
  // 本项目除登录接口外，其它所有接口请求头信息中均需要包含token信息方可访问
  let authToken = localStorage.getItem('Auth-Token')
  headers['Auth-Token'] = authToken
  let options = {
    heade