vue3使用5--axios请求封装使用

（1）如果axios没有安装

npm install axios

（2）准备的两个json

 1）address.json

{
    "id":1,
    "address":"北京市昌平区宏福苑",
    "distance":"2000m"
}

2）products.json

[
    {
        "id":"001",
        "title":"华为手机30",
        "price":3129
    },
    {
        "id":"002",
        "title":"小米手机30",
        "price":2139
    }
]

3)自己可以测试

 

 （3）APP.vue

<template>
<h3 v-if = "loading">正在加载中...</h3>
<h3 v-else-if = "errorMsg">错误信息：{{errorMsg}}</h3>
<ul v-else>
  <li>id:{{data.id}}</li>
  <li>address:{{data.address}}</li>
  <li>distance:{{data.distance}}</li>
</ul>
<hr/>
<!-- 数组数据 -->
<ul v-for = "item in data" :key="item.id">
  <li>id:{{item.id}}</li>
  <li>title:{{item.title}}</li>
  <li>price:{{item.price}}</li>
</ul>
</template>
<script lang="ts">
import { defineComponent} from 'vue'
import useRequest from './hooks/useRequest'
//定义接口，约束对象的类型
interface IAddressData{
  id:number;
  address:string;
  distance:string;
}
interface IProductsData{
  id:string;
  title:string;
  price:number;
}
export default defineComponent({
  name: 'App',
  setup(){
     const {loading, data, errorMsg} = useRequest('/data/address.json')  //获取对象数据
    //（1）注意高级用法
    // const {loading, data, errorMsg} = useRequest<IAddressData>('/data/address.json')  //获取对象数据
    // console.log(data)
    // console.log("chenloading"+loading.value)
    // //const {loading, data, errorMsg} = useRequest('/data/products.json')  //获取数组数据
    //（2）注意高级用法
    const {loading, data, errorMsg} = useRequest<IProductsData[]>('/data/products.json')  //获取数组数据
    return{
      loading,
      data,
      errorMsg
    }
  }
})
</script>
<style>
</style>

(4)hooks目录下的useRequest.ts

 

import { ref } from 'vue';
//引入axios
import axios from 'axios';

//发送ajax的请求
export default function <T> (url:string){
    //加载的状态
    const loading =ref(true)
    //请求成功的数据
    const data =ref<T|null>(null)
    //错误信息
    const errorMsg =ref('')

    axios.get(url).then(response=>{
        console.log(response)
        //加载的状态
        loading.value = false
        data.value = response.data

    }).catch(error=>{
        //加载的状态
        loading.value = false
        errorMsg.value = error.data||'未知错误'
    })

    return{
        loading,
        data,
        errorMsg
    }
}