vue3 ts 使用axios_vue3 ts axios

前言：

以vite创建的项目，vue3使用axios，使用ts二次封装axios访问接口，并调用接口。

1、下载插件

npm install axios

2、引入插件

在使用的文件中引入

import axios from "axios";

3、使用插件

request.ts

import axios from "axios";
import { ElMessage } from 'element-plus'
const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL, // url = base url + request url
    timeout: 30000,// request timeout
    // withCredentials:true
})
// 请求拦截
service.interceptors.request.use(
    (config: any) => {
        return config
    },
    (error: any) => {
        return Promise.reject(error)
    }
)
 
// 响应拦截
service.interceptors.response.use(
    (response: any) => {
        const res = response.data
        if (res.code !== 1 || res.code !== 200) {
            return response.data
        } else {
            return response.data
        }
    },
    (error: any) => {
        if (error.response) {
            switch (error.response.status) {
                case 500:
                    ElMessage({
                        message: "服务器错误，请稍后重试",
                        type: "error",
                        duration: 5 * 1000
                    })
                    break
                default:
                    if (error.response.data.error == "invalid_grant") {
                        ElMessage({
                            message: error.response.data.error_description,
                            type: "error"
                        })
                    }
                    return Promise.reject(error)
            }
        }
    }
)
 
export default service

4、封装axios

api.ts

import request from "@/utils/request";
 
export function getUniteLoginUrl(params: any) {
    return request({
        url: '/portal/user/getUniteLoginUrl',
        method: 'post',
        params
    })
}

5、调用接口

需要调用api接口的文件，此为ts setup语法糖模式

import {getUniteLoginUrl} from "@/api/api"
import { onMounted } from "vue";
 
onMounted(()=>{
  getUniteLoginUrl({type:'0'}).then((res: any)=>{
        console.log(res,"res====");
        
  })
})