美文网首页vue3+ts
vue3+ts使用Axios

vue3+ts使用Axios

作者: 翟小乙 | 来源:发表于2023-07-09 14:36 被阅读0次

一.创建vue3+ts项目

  • 创建
 npm create vite@latest
  • 选择vue框架


    1688970221642.png
  • 选择语言typescript


    1688970221648.png

二.配置axios

  • 安装
npm install axios -s
  • 创建request.ts
import axios from 'axios';

//1. 创建axios对象
const service = axios.create({
    baseURL:'http://testapi.xuexiluxian.cn'
});

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;
  • 创建api.ts
  1. 使用typescript语法,进行请求参数限制和响应参数限制
  2. 避免使用和响应的时候出现参数错误,限制类型
import require from './request'

// 请求参数限制
interface IBaiDu{ 
     Url:string,
     method:string,
     params:{
         pageNum:number,
         pageSize:number
     }
}
// 响应参数限制
interface IList{
    courseCover:string
}

// 响应参数限制
interface IResposeBaiDu{
   data:{
    pageInfo:{
        endRow:number,
        list:IList[]
    }
   },
   meta:object
}

export function getBaiduData(config:IBaiDu):Promise<IResposeBaiDu>{

     return require(
        {
            url:config.Url,
            method:config.method,
            data:config.params
        }
     )

}

三. vue3中使用


<template>
    <div class="card">
      <button type="button" @click="getHttpBaidu">发送请求</button>
      
    </div>
   
  </template>

<script setup lang="ts">

import {getBaiduData} from '../types/axios/api'

import { ref } from 'vue'

defineProps<{ msg: string }>()
 
const getHttpBaidu =()=>{

    getBaiduData({
        Url:'/api/course/mostNew',
        method:'post',
        params:{
            pageNum:1,
            pageSize:8
        }
    }).then(res=>{
        console.log('res-------------',res.data.pageInfo.list[0].courseCover);
  
    }).catch(err=>{
        console.log('err------------',err);
        
    })

}

</script> 

四. 注意

在该项目中已经添加了ts引用配置,所以在api中,interface可以单独放到一个ts文件即可,增加可读性
下图中,include包含 ts文件

  • ts配置是

    1688971146321.png
  • 全局文件命名规范 xxx.d.ts

相关文章

网友评论

    本文标题:vue3+ts使用Axios

    本文链接:https://www.haomeiwen.com/subject/utjsudtx.html