Vue——axios的二次封装

文章目录

一、请求和传递参数
- 1、get 请求
- 2、post 请求
- 3、axios 请求配置
二、axios 的二次封装
- 1、配置拦截器
- 2、发送请求
三、API 的解耦
- 1、配置文件对应的请求
- 2、获取请求的数据
四、总结

一、请求和传递参数

在 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 文件

首先创建 axios 对象
添加请求拦截器（前端给后端的参数）
添加响应拦截器（后端给前端的数据）

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 组件

在需要使用的组件中 导入 request
直接发送请求即可

<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 文件，配置对应请求

./api/course.js 文件

发送与课程相关的请求

import request from "../utils/request";// 获取一级分类（get请求）
export function getSendCategorys() {return request({url: '/course/category/getSecondCategorys',})
}// 查询课程（post请求）
export function courseSearch(data) {return request({url: '/course/search',method: 'post',data})
}

2、获取请求的数据

App.vue 组件

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

<template><div id="app"></div>
</template><script>
import { getSendCategorys, courseSearch } from "./api/course";
export default {name: "App",data() {return {};},created() {// 获取一级分类getSendCategorys().then((res) => {console.log(res);});// 查询课程（有参数的传递）courseSearch({pageNum: 1,pageSize: 5}).then((res) => {console.log(res);});}
}

文件结构如下：

四、总结

对 axios 的二次封装，在企业级项目中是必须要配置的。

因为经过封装的 axios，更容易使用和管理，并且可以 减少代码量，让 逻辑更清晰

Vue——axios的二次封装相关推荐

axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios进行二次封装
Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用.如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区. 为什么要对ax ...
axios介绍以及对axios进行二次封装
目录一.axios基础 1.什么是axios? 2.axios的安装 3.axios常用配置项 4.axios和ajax的区别二.使用axios发送请求 1. 发送get无参请求 2. 发送get ...
axios的二次封装(详解)
一.首先让我们了解一下为什么要对axios进行二次封装? 1,代码封装,重用性高,减少代码量,减低维护难度. 2,统一处理一些常规的问题一劳永逸,如http错误. 3,拦截请求和响应,提前对数据进行处 ...
面试官：为啥要axios 的二次封装呢及其使用是干啥的
一.为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加.api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 举个例子,当axios发生问题存在重 ...
【vue】Storage二次封装
文章目录一.storage二次封装代码二.理解 1.setItem 2.getItem 3.clearItem 三.使用一.storage二次封装代码 /*** Storage 二次封装*/ i ...
Axios的二次封装(简单易懂)
什么是axios? 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端简单的理解就是ajax的封装在使用Vue.js框架开发前端项目时会经常发送ajax请求服务端接口在 ...
基于axios的二次封装
1. axios的封装前言 axios是一个基于 promise 的 HTTP 库,目前,在vue,react框架中也还是备受青睐,根据不同项目的业务,也有许多种不同的封装方法,但不同的应用场景,导致 ...