axios在vue3脚手架项目+ts中使用

1、安装依赖

npm install --save axios
1

2、配置一下axios

在项目中的src目录下创建一个config目录，在其中创建一个http.ts的文件。

import axios, {AxiosRequestConfig,AxiosResponse} from "axios";

// 请求拦截
axios.interceptors.request.use((config: AxiosRequestConfig) => {
    return config;
})

// 响应拦截
axios.interceptors.response.use((response: AxiosResponse<any>) => {
    return response;
},error => {
    return Promise.reject(error);
})

export default axios;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import axios from './config/http'

const app = createApp(App);

app.use(router).mount('#app')
// 配置到全局变量中
app.config.globalProperties.$http = axios;
1
2
3
4
5
6
7
8
9
10
11

4、使用axios

在setup()中

// 获取全局变量
const gv = getCurrentInstance().appContext.config.globalProperties;

// 使用
gv.$http.get('https://www.fastmock.site/mock/xx0c3c2/api/nav_list')
        .then((res)=>{
          console.log(res.data);
      })
1
2
3
4
5
6
7
8

OK