vue3 setup 语法糖axios的引入和基本使用

vue3 axios的引入和基本使用

1.安装axios

npm install axios

2.创建文件夹/文件

/utils/request.js

3.配置axios

request.js

import  axios from "axios";
const baseURL=''
const instance = axios.create({
    baseURL,
    timeout:1000
})
//请求拦截器
instance.interceptors.request.use((config)=>{
        //可以配置config.header 里面的相关字段
    return config  //必须返回配置信息 
},
(err)=>{
    //错误信息
    console.log(err);
    return err  //必须返回配置信息 
}
)
//响应拦截器
instance.interceptors.response.use((res)=>{
    //res.data 是业务数据
    return res.data
},
(err)=>{
    return Promise.reject(err)
}
)

export default instance

4.配置api文件

/api/App.js

5.配置请求

api/App.js

import request from '@/utils/request'
//测试csdn的搜索接口
export const getSearchApi = (data)=>
    request.get('https://so.csdn.net/api/v1/search_top_data',data)

6.使用api

App.vue

<script setup>
import {getSearchApi} from '@/api/App'
const getSearch = async ()=>{ //async 和await 变为同步函数
  const res = await getSearchApi({q:'c语言',t:'a;;'})
  console.log(res);
}
getSearch()
</script>

<template>

</template>

<style scoped>

</style>
<script setup>
import {getSearchApi} from '@/api/App'
const getSearch = async ()=>{
  const res = await getSearchApi({q:'c语言',t:'a;;'})
  console.log(res);
}
getSearch()
</script>

<template>

</template>

<style scoped>

</style>

7.测试

成功获取数据