vue3+ts使用Axios

一.创建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