Vue——axios的二次封装

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


一、请求和传递参数

在 Vue 中,发送请求一般在 created 钩子中,当然放在 mounted 钩子中也没问题。

以下请求的前提都是安装了 axios,并且 import axios from 'axios' 成功导入

Axios官网链接

1、get 请求

get 请求传参,在地址里面通过 ?xxx=123 的形式

  // Vue 环境中
  async created() {
    let res = await axios.get(
      "http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123"
    );
    console.log(res);
  }

2、post 请求

post 请求传参,在第二个参数里面传递

  // Vue 环境中
  async created() {
    let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {
      pageNum: 1,
      pageSize: 5
    })
    console.log(res);
  }

3、axios 请求配置

请求配置里面可以设置很多属性

  // Vue环境中
  async created() {
    let res = await axios({
      url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',
      method: 'post', // 默认是 get 请求
      headers: {}, // 自定义请求头
      data: {  // post 请求,前端给后端传递的参数
        pageNum: 1,
        pageSize: 5
      }, 
      params: {}, // get 请求,前端给后端传递的参数
      timeout: 0, // 请求超时
      responseType: 'json' // 返回的数据类型
    })
  console.log(res);
  }

二、axios 的二次封装

目的:方便统一管理

注意:先安装 axios 才可以使用,终端键入:npm i axios,之后回车安装它

1、配置拦截器

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

request.js 文件

  1. 首先创建 axios 对象
  2. 添加请求拦截器(前端给后端的参数)
  3. 添加响应拦截器(后端给前端的数据)
import axios from 'axios'

// 创建 axios 对象
const instance = axios.create({
    baseURL: 'http://testapi.xuexiluxian.cn/api', // 根路径
    timeout: 2000 // 网络延时
})

// 添加请求拦截器 => 前端给后端的参数【还没到后端响应】
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 最终返回的对象
export default instance

2、发送请求

在需要发请求的组件中,导入 request.js, 之后发送请求即可

App.vue 组件

  1. 在需要使用的组件中 导入 request
  2. 直接发送请求即可
<template>
  <div id="app">发送请求</div>
</template>

<script>
import request from "./utils/request";
export default {
  name: "App",
  data() {
    return {};
  },
  created() {
  	// get 请求
    request({
      url: "/course/category/getSecondCategorys",
    }).then((res) => {
      console.log(res);
    });

	// post 请求
    request({
      url: "/course/mostNew",
      method: "post",
      data: {
        pageNum: 1,
        pageSize: 5,
      },
    }).then((res) => {
      console.log(res);
    });
  }
}
</script>

三、API 的解耦

API 解耦的目的:为了同一个接口可以多次使用; 为了方便 api 请求统一管理

1、配置文件对应的请求

在 src 目录下新建 api 文件夹,该文件夹下创建 xxx.js 文件,配置对应请求

import { axios } from "@/utils/request"
import requestJpaas from "../../utils/geteway"
import serve from "./serve"
const { getData } = requestJpaas
// 服务
const prefix = "/jpaas-jiop-web-server"
const api = {
	// 获取用户信息
	getUserInfo: prefix + "/interface/buttjoint/jisbuttsuccess",
}

export const yhzxAPI = {
	// 获取用户信息
	getUserInfo(params) {
		return axios({
			url: api.getUserInfo,
			method: "get",
			params
		})
	},
	// 网关接口
	queryList(appid, interface_id, params) {
		return getData({
			appid,
			interface_id,
			params
		})
	}
}

2、获取请求的数据

App.vue 组件

从文件定义的请求中导入对应函数
获取数据

<template>
  <div>
  </div>
</template>

<script>
import { yhzxAPI } from '@/api/yhzx/yhzx.js'

export default {
  name: 'IndexView',
  data() {
    return {}
  },
  created() {
  	this.getRecord()
  },
  mounted() {},
  methods: {
    getRecord() {
      let params = {
        title: document.title,
        address: encodeURIComponent(location.href),
        type: 'xxxxxx',
      }
      yhzxAPI
        .getUserInfo(params)
        .then((result) => {
          if (result.code == 200 && result.success) {
            console.log('我的足迹添加成功!')
          } else {
            console.log('我的足迹添加失败或未登录!')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>

<style scoped lang="less">

</style>

四、总结

对 axios 的二次封装,在企业级项目中是 必须 要配置的。
因为经过封装的 axios,更容易使用和管理,并且可以 减少代码量,让 逻辑更清晰文章来源地址https://www.toymoban.com/news/detail-679086.html

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

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

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

相关文章

  • axios的二次封装

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

    2023年04月12日
    浏览(101)
  • 关于axios的二次封装

    @1 第一步 我们一般都会先导入axios         import axios from ‘axios’ @2 第二步 创建axios的实例 可以同时创建多个实例 每个实例配置不同         const http = axios.create( {                  // 这里面可以做一些基础的配置 比如基础路径 ,axios 请求超时的时间            

    2024年02月03日
    浏览(55)
  • Axios的二次封装(简单易懂)

    是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 简单的理解就是ajax的封装 在使用Vue.js框架开发前端项目时 会经常发送ajax请求服务端接口 在开发过程中 需要对axios进一步封装 方便在项目中的使用 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求

    2023年04月09日
    浏览(112)
  • Vue3中搜索表单的二次封装

    最近使用Vue3+ElementPlus开发项目,从整体上构思组件的封装。能写成组件的内容都进行封装,方便多个地方使用。 受AntDesign的启发,在项目中有搜索表单+table+分页的地方可以封装为一个组件,只需要对组件传入table的列,组成一个配置项,通过配置可以显示搜索表单、table项的

    2024年02月11日
    浏览(49)
  • vue3富文本编辑器的二次封装开发-Tinymce

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 专享链接 简介 1、安装:pnpm add tinymce @tinymce/tinymce-vue === Vue3 + tinymce + @tinymce/tinymce-vue 2、功能实现图片上传、基金卡片插入、收益卡片插入、源代码复用、最大长度限制、自定义表情包

    2024年02月07日
    浏览(67)
  • Vue电商项目--axios二次封装

    刚刚经过postman工具测试,发现接口果然发生了改变。 新的接口为 http://gmall-h5-api.atguigu.cn   如果服务器返回的数据code字段200,代表服务器返回数据成功 整个项目,接口前缀都有/api字样 XmlHttpRequest,fetch,JQ,Axios这些都是很优秀的网络请求库 为什么需要进行二次封装axios? 请

    2024年02月01日
    浏览(50)
  • vue3 element-plus el-form的二次封装

    form表单的二次封装 vue3 element-plus el-form的二次封装 属性名 类型 默认值 说明 data Array [] 页面展示数据内容 onChange Function false 表单事件 bindProps Object {} 表单属性 formRef Object {} 表单ref ruleForm Object {} 数据

    2024年02月13日
    浏览(73)
  • vue对axios进行二次封装

            在Vue中,对Axios进行二次封装可以提高代码的可重用性和可维护性。通过封装,我们可以将请求的配置、错误处理和拦截器等逻辑集中到一个地方,方便后续的修改和扩展。此外,封装Axios还可以简化代码,减少重复的请求配置,提高开发效率。因此,对Axios进行二

    2024年01月21日
    浏览(41)
  • element ui 表格组件与分页组件的二次封装 【扩展】vue中的render函数

    目录 效果图  组件封装  parseTime函数 debounce 函数 render通用渲染模版 页面使用 【扩展】vue 函数式组件 函数式组件特点: 函数式组件的优点: 【扩展】vue中的render函数 一、初步认识render函数 二、为什么使用render函数 三、render函数的解析 【扩展】添加操作栏显示权限 结构

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

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

    2024年02月06日
    浏览(68)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包