vue封装axios

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

(4条消息) Vue——axios的二次封装_前端杂货铺的博客-CSDN博客

1.下载axios依赖包

npm install axios

2.在src目录下新建utils文件夹,在utils文件夹下新建request.js文件

vue封装axios

 3.request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'  //导入element-ui组件库

// 创建axios的对象
const instance = axios.create({
    baseURL: "https://api.cat-shop.penkuoer.com",  //配置固定域名
    timeout: 5000
})

// 请求拦截
// 所有的网络请求都会走这个方法,可以在请求添加自定义内容
instance.interceptors.request.use(
    function (config) {
        config.headers.token = '123456' // 请求头添加token值
        config.headers.info = 'lxy'  //请求头添加info值
        return config
    },
    function (err) {
        return Promise.request(err)
    }
)

// 响应拦截
// 此处可以根据服务器返回的状态码做相应的数据
instance.interceptors.response.use(
    function (response) {
        const res = response
        if (res.status === 500) {
            MessageBox.alert('系统未登录,请重新登录', '错误', {
                confirmButtonText: '确定',
                type: 'error'
            }).then(() => {
                store.dispatch('FedLogOut').then(() => {
                    location.reload()
                })
            })
            return Promise.reject('error')
        } else if (res.errno === 502) {
            MessageBox.alert('系统内部错误,请联系管理员维护', '错误', {
                confirmButtonText: '确定',
                type: 'error'
            })
            return Promise.reject('error')
        }
    },
    function (err) {
        return Promise.request(err)
    }
)

// 封装get和post请求
export function get(url, params) {
    return instance.get(url, {params})
}

export function post(url, data) {
    return instance.post(url, data)
}

export default instance;

方式1:(最常用使用)

在src目录下新建api文件夹,在api文件夹中新建index.js用于存放请求接口

api目录下的index.js

import request from "@/utils/request";  //导入封装请求的js文件

export function products(params) {
  return request({
    url: "/api/v1/products",  //接口路径
    method: "get",  //接口方法
    headers: { 'Content-Type': 'multipart/form-data' }, //给接口添加请求头
    params  //接口参数
  });
}

export function login(data) {
  return request({
    url: "/api/v1/auth/login",
    method: "post",
    data,
    // post请求接口后面拼接参数
    params: {
      currentOpenId: 'currentOpenId',
      currentCompanyOpenId: 'currentCompanyOpenId'
    }
  });
}

页面使用:

<template>
  <div>
    <button @click="get()">封装的get</button>
    <button @click="post()">post</button>
  </div>
</template>

<script>
import {products,login} from "@/api/index"  //导入api目录下的接口文件,并在{}中写使用的接口
export default {
  methods: {
    get(){
      products({name:"lxy",age:18,date: new Date().getTime()}).then(res => {
        console.log('res',res.data);
      })
    },
    post(){
      let obj = {
        name:'lxy',
        age:18
      }
      login(obj).then(res => {
        console.log('res',res.data);
      })
    }
  },
};
</script>

方式2:(不常用)

request.js

export function get(url, params) {
    return instance.get(url, {params})
}

export function post(url, data) {
    return instance.post(url, data)
}

页面使用:

<template>
  <div>
    <button @click="meGet()">封装的get</button>
    <button @click="mePost()">post</button>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  methods: {
    // 方式1 在方法里直接写api路径
    meGet() {
      get("/api/v1/products",{name:'aaa',age:18}).then((res) => {
        console.log("res", res);
      });
    },
    mePost() {
      let obj = {
        name:108
      }
      post("/api/v1/auth/login", obj).then((res) => {
        console.log("res", res);
      });
    },
  },
};
</script>

方式3:原生方法文章来源地址https://www.toymoban.com/news/detail-514375.html

    methods:{
        getMthods(){
            axios.get("https://api.cat-shop.penkuoer.com/api/v1/products",{
                params:{
                    page:3,
                    per:2
                },
                headers:{

                }
            })
            .then(res => {
                console.log('res',res);
            })
        },
        postMthods(){
            axios.post("https://api.cat-shop.penkuoer.com/api/v1/auth/login",{
                name:"lxy",
                age:18
            },{
                params:{
                    a:123,
                    b:123
                }
            })
            .then(res => {
                console.log('res',res);
            })
        },

    }

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

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

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

相关文章

  • 【vue2小知识】实现axios的二次封装

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :在vue2中实现axios的二次封装 目录 一、平常axios的请求发送方式 二、axios的一次封装 三、axios的二次封装  四、总结 【前言】我们在使用axios发送请求的时候,如果是直

    2024年02月01日
    浏览(53)
  • 个人博客-SpringBoot+Vue3项目实战(6)- 二次封装Axios

    在上文中,我们封装了统一的后端数据返回结果,有了标准化的接口数据,我们就可以针对它,在前端发送接收时,进行预处理。 通常在一个企业级或者个人开源的项目中, Axios 会被二次封装。 二次封装的好处有哪些呢? 统一 url 配置 统一 api 请求 request (请求)拦截器,例

    2024年02月06日
    浏览(71)
  • Vue3和TypeScript下基于Axios的二次封装教程

    学习如何在Vue3项目中使用TypeScript和Axios进行二次封装,实现更灵活的网络请求处理。详细教程包括拦截器设置和类型扩展。

    2024年02月05日
    浏览(152)
  • 【Vue项目笔记心得】postman接口测试、axios二次封装、api接口统一管理

    1、postman接口测试 下载地址:Download Postman | Get Started for Free   2、axios二次封装 (1)为什么进行二次封装axios? 请求拦截器、响应拦截器: 请求拦截器 :可以在发请求之前可以处理一些业务 响应拦截器 :当服务器数据返回以后,可以处理一些事情 安装axios: npm install ax

    2023年04月08日
    浏览(44)
  • 前端(二十七)——封装指南:Axios接口、常用功能、Vue和React中的封装技术

    😊博主:小猫娃来啦 😊文章核心: 前端封装指南:Axios接口、常用功能、Vue和React中的封装技术 在我们前端开发当中,封装是种将代码和功能组织起来以便重复使用的方式。它可以使开发人员更高效地编写、维护和管理代码。本文将探讨前端封装的定义、重要性以及在Web开

    2024年02月05日
    浏览(45)
  • 【axios】-- axios 二次封装

    如baseUrl,超出时间等 出于权限和安全考虑的密钥设置到请求头 主要针对于错误的情况做全局统一处理 把对接口的请求封装为一个方法 例子

    2024年02月09日
    浏览(48)
  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(100)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(52)
  • axios的二次封装

    1 axios是干什么的? XMLHttpRequest、jq、fetch、axios都是用来向服务器端发送请求,并获得响应 2 为什么要进行二次封装axios? 为了封装请求拦截器,响应拦截器 请求拦截器:可以在发送请求之前可以处理一些业务 响应拦截器:当服务器数据返回以后,可以处理一些事情 在src下创

    2023年04月12日
    浏览(104)
  • axios 二次封装

    基本上每一个项目开发,都必须要二次封装 axios。主要是为了减少重复性工作,不可能每一次发起新请求时,都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数,每次调用的时候只需要传入变化的参数。 :::warning 注意 基于上个

    2024年02月11日
    浏览(60)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包