vue3+ts+axios 二次封装

龙雨LongYu12

已于 2023-03-02 18:58:23 修改

阅读量871

点赞数

分类专栏： Vue3.0 文章标签： vue.js typescript npm

于 2023-03-02 18:56:21 首次发布

本文链接：https://blog.youkuaiyun.com/A88552211/article/details/129306773

版权

Vue3.0 专栏收录该内容

14 篇文章

订阅专栏

文章展示了如何在项目中安装和配置axios库，包括设置基础URL、超时时间和请求头。特别地，它强调了请求和响应拦截器的使用，用于处理token管理和错误处理。此外，还定义了get和post请求的辅助函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、依赖安装：

npm i axios qs @types/qs

二、axois/index.ts

import axios from 'axios'
import qs from 'qs'
const baseUr = 'http://backend-api-01.newbee.lid/api/v1/user/register'

let path = "http://backend-api-01.newbee.lid/api/v1/"             //请求根地址
// let path = "http://localhost:3060/"             //请求根地址

// 全局默认配置
axios.defaults.baseURL = path
axios.defaults.timeout = 10000
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token') + ''

//请求拦截
axios.interceptors.request.use( 
  async config => {
    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    config.headers.token = sessionStorage.getItem('token')
    return config;
  },
  error => {
    return Promise.reject(error);
  })

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  let { data } = response
  if (data.token) {
    localStorage.setItem('kuaishi', data.token)
    axios.defaults.headers.common['Authorization'] = data.token;
  }
  return response;
}, function (error) {
  // if (error.response.status) {
  //   switch (error.response.status) {
  //     // 401: 未登录                
  //     // 未登录则跳转登录页面，并携带当前页面的路径                
  //     // 在登录成功后返回当前页面，这一步需要在登录页操作。                
  //     case 401:
  //       break
  //     // 403 token过期                
  //     // 登录过期对用户进行提示                
  //     // 清除本地token和清空vuex中token对象                
  //     // 跳转登录页面                
  //     default:
  //   }
  //   return Promise.reject(error.response);
  // }
  return Promise.reject(error);
});

 

const get = (url: string, params: object) => {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => {
      resolve(res.data)
    }).catch(err => {
      alert('服务出错')
    })
  })
}

const post = (url: string, data: object) => {
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(data)).then(res => {
      resolve(res.data)
    }).catch(err => {
      alert('服务出错')
    })
  })
}


export {
  get, post
}

三、axios/api.ts

import {
  get, post
} from './index'

export default {
  // Login: (data: object) => post('/api/users/Login', data), // 登录
}

只要在使用的文件里面引入 axios/api.ts 就行