axios 超时_Vue中Axios的封装管理

最新推荐文章于 2024-07-03 08:00:00 发布
最新推荐文章于 2024-07-03 08:00:00 发布
阅读量480 收藏 1
点赞数
文章标签： axios 超时 axios完美封装 axios封装 axios请求封装 package.json 封装 vue模块 uni-app网络请求封装

Axios 封装

ddacfc4cf2bc962a5b5b214883fc4274.png

定义

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 自动转换JSON数据

  • ##### 客户端支持 XRSF

回归正题

在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。
通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。

同时，与接口打交道那么就会用到网络请求，与 Vue 结合的网络请求库有哪些呢？

  • vue-resource

  • axios   官方推荐

  • fetch

本章将使用 axios  来完成接口的请求，以及对axios 请求的封装，来满足业务开发。

一次编写， 终身受用 😁

开始
安装axios

yarn add axios

封装http.js

创建单独文件来封装axios，封装的同时，你需要和 后端  协商好一些约定，请求头 ， 状态码, 请求超时时间…….

引入必要的UI 提示框, 不同的状态码，提示不同的响应，

请求头 :  来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)

状态码 :   根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好。

请求拦截器:  根据请求的请求头设定，来决定哪些请求可以访问。

响应拦截器：这块就是根据 后端 返回来的状态码判定执行不同业务

825179d6011f89e883ff36bdacbeba8d.png

完整代码

配置多域名请求不同URL

一般自己写项目时， 一个接口URL 就可以了。但在实际项目开发中，一个项目可能会请求不同的服务器的url，这时，我们简单的配置下访问接口域名，然后不同域名的接口，直接换对象调用即可，这样不管有多少个不同的接口，我们都可以很好的管理使用。

167f66937a2b962078c9f52357c83534.png

完整代码

到现在 axios 基本封装完成，可以满足你基本业务需求了

axios 封装完事了， 接下来就是封装单独的业务模块请求了，这块怎么划分 完全看个人风格,， 下面我会列出 两种

业务需求注意:

  • 必须引入 http.js  axios

  • 必须引入 base.js  接口url

  • 必须在Vue 入口文件下，引入业务需求 api.js,并且将api挂载到Vue 原型上

  • 剩下就是写你对应的业务需求了

风格1

所有请求都写到一个api.js  文件下

32b96f0ee54c3ff6d21e0354a67009af.png

完整代码

如何使用呢？
全局挂载`api.js`

580281c9c68b1d1cdd23cd748461e14c.png

业务组件调用

03363138ce5ce9086732417ec32aaa61.png

风格2

可以新建对应组件模块的文件来管理对应的 业务请求，这样接口出现问题，定位错误快，最后将不同的文件 引入到一个 api,js 里， 这样管理起来很方便。

935de9ae8dd02b311ed5791a55ac05e7.png

94da67813f151d277b3931672e8887fd.png

如何使用呢？

da1c64a09850ff0b0a207529deb8f174.png

封装 与 不封装对比

020b489e60d53f005ce63b53c123fae4.png

没有封装， 裸奔的Axios

6c6b25a5f7fbb05b7abfd85b98f69b00.png

最后

到现在，Axios基本封装完事了，也封装了业务模块的请求，基本上可以满足基本的业务需求了。如果项目还需要其它需求，还可以在原有的上面进行再次封装。

封装后，如果项目有接口域名有变动，执行调用base.js下的域名对象即可。

历史精彩文章：

2020前端技术面试必备Vue:(一)基础快速学习篇

2020前端技术面试必备Vue:(二)Router篇

2020前端技术面试必备Vue：(二)组件篇

2020前端技术面试必备Vue：(四)Vuex状态管理

以上是Vue全家桶系列

全栈进阶：Nginx基本功能及其原理

TypeScript 快速入门(基础篇)
MYSQL常用操作指令

更多精彩文章在公众号

3d2f32c387cdc68b1111fa72cbab19b3.png

                                                                  原创不易 ， 觉得不错 点个赞👍

“写文章不挣钱，交个朋友”

weixin_39966740
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios封装
weixin_58442608的博客
03-11 3561
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。
Vue---axios封装
weixin_51103262的博客
11-01 116
vue—axios封装 封装 import axios from 'axios' axios.defaults.baseURL="http://127.0.0.1:8000/" axios.defaults.timeout = 1000000; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json';
vue3.0(十六)axios详解以及完整封装方法
最新发布
chengcheng9876的博客
07-03 5209
axios详解以及完整封装方法
Axios封装
weixin_57844432的博客
03-17 2585
axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求。
axios http请求拦截
qq_36262295的博客
11-04 2655
//引入axios import axios from 'axios' //默认公共路径 axios.defaults.baseURL = '/api' axios.interceptors.request.use((config) => {//请求拦截 //设置请求头添加token 看个人需求 config.headers.token = localStorage.getItem('token'); return config; }); axios.interceptors.respon
vue+ts下对axios的封装实现
10-15
在Vue.js和TypeScript的开发环境中，我们常常需要对第三方库如axios进行封装，以便更好地管理和定制网络请求。本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你...
详解vue中axios的使用与封装
10-17
本文主要介绍如何在Vue项目中使用Axios，并展示如何进行封装以简化HTTP请求。 首先，Axios的安装非常简单。可以通过npm命令来安装。在命令行中输入以下命令即可： ```bash npm install axios --save ``` 接下来，...
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
vue中axios的二次封装实例讲解
10-16
下面将详细介绍在Vue中如何对axios进行二次封装的实例及其相关知识点。 首先，我们需要创建一个专门用来处理HTTP请求的文件，例如在`src/utils`目录下创建`request.js`。在这个文件中，我们将导入axios、路由管理器...
详解vue中axios的封装
10-18
在本文中，我们将详细探讨如何在Vue项目中封装axios库。首先，我们需要明白axios是一个基于Promise的HTTP客户端，它适用于浏览器和node.js环境。封装axios可以让我们的项目中网络请求部分更加统一、规范，同时也能...
封装axios
qq_49266141的博客
06-21 103
请求拦截响应拦截请求方法的封装 import axios from 'axios' import config from './config'; let instance = axios.create({ timeout: 5000, baseURL: config.SERVER_BASEPATH }) //请求拦截 instance.interceptors.request.use(config=>{ return config },err=>{ ret
搭建脚手架 配置反向代理 封装axios
Mr_Ch1023的博客
04-27 266
npm install -g @vue/cli // mac本前边还是一样，要加sudo ： sudo npm install -g @vue/cli vue create 项目名 defuault默认 Manually 自定义（vuex,sass,less,router…） Babel Router Vuex CSS Linter（用着不舒服，可选可不选） y history路由模式 n h...
axios 同时多个请求_二次封装axios，根据参数来实现多个请求多次拦截
weixin_34543731的博客
01-31 416
import Vue from 'vue'import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头，如果不需要可以取消这一步axios.defaults.headers = {'X-Requested-With': 'XMLHttpRequest'}// 请求超时的时间限制axios.defaults.t...
vue封装axios超时请求
07-17
在 Vue 中封装 Axios 实现超时请求，你可以按照以下步骤进行操作： 1. 安装 Axios：首先，确保你已经安装了 Axios，可以使用以下命令进行安装： ```bash npm install axios ``` 2. 创建一个 axios 实例：在你的项目中，创建一个名为 `http.js`（或者其他你喜欢的名称的文件，并编写以下内容： ```javascript import axios from 'axios'; const instance =.create({ timeout: 5000, // 设置请求超时时间，单位为毫秒 }); export default instance; ``` 在这个文件中，我们使用 `axios.create()` 方法创建了一个实例，并设置了超时时间为 5000 毫秒（即 5 秒）。 3. 封装请求方法：在你的封装请求的文件（比如 `api.js`）中，引入 `http.js` 文件，并编写请求方法的代码，例如： ```javascript import http from './http'; export function fetchData() { return http.get('/api/data') .then(response => { return response.data; }) .catch(error => { console.error(error); throw error; }); } ``` 在这个示例中，我们使用 `http.get()` 方法发送一个 GET 请求，并返回响应数据。如果请求出现错误，我们打印错误信息并抛出异常。 这样，你就可以在 Vue 组件中使用封装的请求方法来发送请求，并且会自动处理超时。例如，在你的组件中可以这样使用： ```javascript import { fetchData } from './api'; export default { mounted() { fetchData() .then(data => { console.log(data); }) .catch(error => { console.error(error); }); } } ``` 这样，当请求超过 5 秒钟没有返回响应时，就会触发超时错误，并打印错误信息。 记得根据你的具体需求，调整超时时间和其他配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值