vue3 封装api接口

这篇具有很好参考价值的文章主要介绍了vue3 封装api接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

新建axiosj.ts

import axios from 'axios';
import { showMessage } from "./status";   // 引入状态码文件
import { ElMessage } from 'element-plus'  // 引入el 提示框,这个项目里用什么组件库这里引什么

// 设置接口超时时间
axios.defaults.timeout = 60000;

// 请求地址,这里是动态赋值的的环境变量,下一篇会细讲,这里跳过
// @ts-ignore
axios.defaults.baseURL = import.meta.env.VITE_API_DOMAIN;   

//http request 拦截器
axios.interceptors.request.use(
  config => {
  // 配置请求头
    config.headers = {
      //'Content-Type':'application/x-www-form-urlencoded',   // 传参方式表单
      'Content-Type':'application/json;charset=UTF-8',        // 传参方式json
      'token':'80c483d59ca86ad0393cf8a98416e2a1'              // 这里自定义配置,这里传的是token
    };
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const {response} = error;
    if (response) {
      // 请求已发出,但是不在2xx的范围
      showMessage(response.status);           // 传入响应码,匹配响应码对应信息
      return Promise.reject(response.data);
    } else {
      ElMessage.warning('网络连接异常,请稍后再试!');
    }
  }
);

// 封装 GET POST 请求并导出
export function request(url='',params={},type='POST'){
//设置 url params type 的默认值
return new Promise((resolve,reject)=>{
  let promise
  if( type.toUpperCase()==='GET' ){
    promise = axios({
      url,
      params
    })
  }else if( type.toUpperCase()=== 'POST' ){
    promise = axios({
      method:'POST',
      url,
      data:params
    })
  }
  //处理返回
  promise.then(res=>{
    resolve(res)
  }).catch(err=>{
    reject(err)
  })
})
}

新建状态码文件:

export const showMessage = (status:number|string) : string => {
    let message:string = "";
    switch (status) {
        case 400:
            message = "请求错误(400)";
            break;
        case 401:
            message = "未授权,请重新登录(401)";
            break;
        case 403:
            message = "拒绝访问(403)";
            break;
        case 404:
            message = "请求出错(404)";
            break;
        case 408:
            message = "请求超时(408)";
            break;
        case 500:
            message = "服务器错误(500)";
            break;
        case 501:
            message = "服务未实现(501)";
            break;
        case 502:
            message = "网络错误(502)";
            break;
        case 503:
            message = "服务不可用(503)";
            break;
        case 504:
            message = "网络超时(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `连接出错(${status})!`;
    }
    return `${message},请检查网络或联系管理员!`;
};

导出案例

import { request } from './axios'
//导出 login
   export function login  (params) {
     return request('/admin-api/system/auth/login',params, 'post')
   }


使用

<script setup>
import { onMounted } from "vue";
import {login} from '/src/api/api.ts'

onMounted(()=>{
  login1()
})

const login1 = async () => {
  const loginParams = {
    username: 'test',
    password: 'test',
  }
  const res = await login()
}
</script>

 文章来源地址https://www.toymoban.com/news/detail-564618.html

到了这里,关于vue3 封装api接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意事项

    ​  1.首先安装插件 npm install unplugin-auto-import @vitejs/plugin-vue -D 2.安装完成后在vite.congfig.ts中配置,红色部分就是关于插件的基础自动导入部分,这样就可以将vue和router的相关api全局导入了, import AutoImport from \\\"unplugin-auto-import/vite\\\" export default defineConfig({   plugins: [     vue(),  

    2023年04月12日
    浏览(63)
  • uniapp微信小程序使用axios(vue3+axios+ts版)

    \\\"vue\\\": \\\"^3.2.45\\\",  \\\"axios\\\": \\\"^1.4.0\\\",  \\\"axios-miniprogram-adapter\\\": \\\"^0.3.5\\\", yarn add axios axios-miniprogram-adapter 在 utils 创建 utils/request.ts 文件 在 src 目录下创建 src/api/config 文件夹 config文件夹中创建home.ts文件,首页的接口都放在里面统一管理  和 config 文件夹同级创建home.ts文件,统一管理请求

    2024年02月16日
    浏览(67)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(64)
  • axios封装—vue3项目

    前言 axios的API很友好,可以在项目中直接使用。但是在大型项目中,http请求很多,且需要区分环境, 每个网络请求有相似需要处理的部分,会导致代码冗余,破坏工程的可维护性,扩展性,所以需要对axios请求进行相应的封装 正文 安装axios 封装请求api 1. 在src目录下新建个

    2024年02月07日
    浏览(78)
  • vite vue3 ts import.meta在vscode中报错

    问题描述:开发使用的框架为vite+vue3+ts,在开发过程中莫名其妙报 仅当“--module”选项为“es2020”、“esnext”或“系统”时才允许使用“import.meta”元属性 问题解决: 通过更改tsconfig.json的module为 esnext,es2022等,未解决该问题; 通过根据vite文档,在 src 目录下创建一个 env.

    2024年02月14日
    浏览(44)
  • Vue3+Axios网络请求封装

    本文将详细介绍一款基于Axios+Typescript封装的网络请求库,该库可以自动携带token、拦截请求和响应等操作,并能够处理请求重复、超时和错误状态码等异常情况。 Axios 是基于Node.js的HTTP客户端,也是一款广泛使用的网络请求库。它具有使用简单、可扩展性高、易用性好等特点

    2024年02月07日
    浏览(50)
  • vue3中axios整体封装

    在 vue3.x 版本中进行封装 使用 promise 封装 post 和 get 方法 api 作为单独模块维护 适配 vue.config.js 中 proxy 代理 结合 async 和 await 1 安装 2 创建http模块 在 src 目录下,创建 request 文件夹,并在该文件夹下,新建 http.js 文件 3 创建单独的api模块 4 在业务代码中使用 5 在vue.config.js中配

    2024年02月17日
    浏览(48)
  • 新建vite+vue3+ts项目,以及解决过程中遇到的问题

    目录 一、新建vite+vue3+ts项目 二、解决过程中遇到的问题 解决报错:Module ‘“xx.vue“‘ has no default export. 解决报错:Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解决 解决报错:[plugin:vite:css] Preprocessor dependency \\\"less\\\" not found. Did you install it? 此处我使用npm做一下

    2024年02月06日
    浏览(136)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(59)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包