axios在ts的使用

最新推荐文章于 2024-09-04 17:06:27 发布

hhhhboom

最新推荐文章于 2024-09-04 17:06:27 发布

阅读量550

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/hhhhboom/article/details/131627558

版权

该文章展示了在Vue项目中如何下载和引入axios插件，然后配置请求和响应拦截器。接着，文章详细说明了如何封装axios以便于调用API，包括设置基础URL、超时时间和错误处理。最后，文章给出了一个调用接口登录功能的例子。

摘要由CSDN通过智能技术生成

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、调用接口

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