首页 前端知识 vue3 ts 使用axios

vue3 ts 使用axios

2024-06-10 23:06:47 前端知识 前端哥 655 383 我要收藏

前言:

以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====");
        
  })
})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11834.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!