Vue3:TS封装axios

小小怪_下士

已于 2024-02-22 10:46:57 修改

阅读量642

点赞数 5

文章标签： vue.js typescript

于 2024-02-21 18:01:18 首次发布

本文链接：https://blog.csdn.net/qq_45061461/article/details/136215969

版权

文章目录

一、安装axios

npm i axios

二、封装axios

1.在根目录中的src文件夹中创建axios新的文件夹,创建index.ts文件

//引入axios
import axios from 'axios'

// 创建axios实例
const requerst = axios.create({
    //配置
    baseURL: '', //接口请求的域名地址
    timeout: 3000,//请求超时时间
    headers:{}, //设置请求头信息
})

//请求拦截处理 
requerst.interceptors.request.use(config=>{
    //在此处处理一些发起请求之前的事情，比如请求携带token等信息
    let token = localStoreage.getItem('token')
    if(token){
        config.headers['Authorization'] = 'Bearer' + token
    }
    retrun config
},
    //请求报错的返回信息
    error=>{
        retrun error
    }
)

//相应拦截处理
requerst.interceptors.response.use(response=>{
    retrun response
},
 error=>{
    retrun error
  }
)

//导出axios
export default requerst

2.创建api.ts文件定义请求方法

improt axiosApi from './index'

//抛出get请求

export function get(url : string , params? : any){
    return axiosApi({
      url,
      method:'get',
      params
   })
}

三、调用测试

1.需要调用接口的文件中引入src->axios->api

import { get } from '刚刚创建的api文件路径'

<script setup lang="ts"> 

//触发事件调用方法 
function Login(){
     let params = {
            name:'小红',
            age:18
     }
    get('/api/getUser',params).then(res=>{
          console.log('res',res);
        })
}

</script>