axios的二次封装

这篇博客介绍了如何在Vue项目中对axios进行二次封装,包括创建request文件夹、设置Service.js和Request.js。Service.js中配置了axios实例,添加了请求和响应拦截器,处理请求超时、错误提示及数据返回。Request.js则提供了获取用户数据和用户详情的接口。在组件中,可以使用async/await语法调用这些接口获取数据。
摘要由CSDN通过智能技术生成

axios的二次封装

1.src根目录下创建request文件夹

2.request文件夹下新建Service.js

import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'http://localhost:3000/' // 默认路径,这里也可以使用env来判断环境
let loadingInstance = null // 这里是loading
// 使用create方法创建axios实例
const Service = axios.create({
  timeout: 8000, // 请求超时时间
  baseURL: ConfigBaseURL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// 添加请求拦截器
Service.interceptors.request.use((config) => {
  //注入token等,token失效的主动介入
  loadingInstance = Loading.service({
    lock: true,
    text: 'loading...'
  })
  return config
})
// 添加响应拦截器
Service.interceptors.response.use(
  (response) => {
    loadingInstance.close()
    // console.log(response)
    // 处理返回数据
    // Token失效被动介入
    return response.data
   
  },
  (error) => {
    console.log('TCL: error', error)
    const msg = error.Message !== undefined ? error.Message : ''
    Message({
      message: '网络错误' + msg,
      type: 'error',
      duration: 3 * 1000
    })
    loadingInstance.close()
    return Promise.reject(error)
  }
)
export default Service

3.request文件夹下新建Request.js

import Service from './Service'
// 获取所有用户数据
export function getUsers (url) {
  return Service({
    method: 'get',
    url: url
  })
}

// 根据id获取用户详情
export function getUserInfoById (url, data) {
  return Service({
    method: 'get',
    url: url + '/' + data
  })
}

4、组件使用方式

  async getUsers () {
      const data = await getUsers('/users')
      // console.log(data)
      this.userList = data //  userList 为 data中用户数据
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值