axios封装，使用拦截器统一处理接口，超详细的教程（推荐）_请求拦截vue2

vue

axios封装

115 浏览量更新于2023-03-03 评论收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

axios封装，使用拦截器统一处理接口，超详细的教程（推封装，使用拦截器统一处理接口，超详细的教程（推

荐）荐）

主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一

定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近从0开始搭了一个vue-cli的项目，虽然axios也可以直接拿来用，但是对接口比较零散，不太好进行维护，也会产生大量的

重复代码，所以笔者对axios进行了统一接口处理，废话不多说，直接上代码。

首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios

的封装写在request.js里，项目机构如图：

1. axios统一封装统一封装

然后开始统一封装axios，首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，

显示loading等。这个main.js根据你个人情况，可加可不加。

//request.js

import axios from "axios";

import qs from "qs";

import app from "../main.js";

然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置：

/****** 创建axios实例 ******/

const service = axios.create({

baseURL: process.env.BASE_URL, // api的base_url

timeout: 5000 // 请求超时时间

});

axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，具体如下：

/****** request拦截器==>对请求参数做处理 ******/

service.interceptors.request.use(config => {

app.$vux.loading.show({

text: '数据加载中……'

});

config.method === 'post'

? config.data = qs.stringify({...config.data})

: config.params = {...config.params};

config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

return config;

}, error => { //请求错误处理

app.$vux.toast.show({

type: 'warn',

text: error

});

Promise.reject(error)

});

然后是对response做统一处理，代码如下：

/****** respone拦截器==>对响应做处理 ******/

service.interceptors.response.use(

response => { //成功请求到数据

app.$vux.loading.hide();

//这里根据后端提供的数据进行对应的处理

if (response.data.result === 'TRUE') {

return response.data;

} else {

app.$vux.toast.show({ //常规错误处理

type: 'warn',

text: response.data.data.msg

});

}

error => { //响应错误处理

console.log('error');

console.log(error);

console.log(JSON.stringify(error));

let text = JSON.parse(JSON.stringify(error)).response.status === 404

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38679839

粉丝: 4
资源: 975

会员权益专享

axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

评论0

会员权益专享

最新资源

axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

评论0

vue-template-mobile:Vue 移动端新项目模板，封装了 H5 项目开发中一些比较常用的功能，比如：微信授权及分享、axios 封装、移动端 vw 适配、UI 组件库等等。使用时只需把项目 clone 下来，按照文档稍作修改即可直接进行业务开发

vue axios登录请求拦截器

详解Axios统一错误处理与后置

axios封装 拦截器

html使用axios封装拦截器

axios拦截器封装

vue3在axios封装拦截器

react axios请求拦截器封装

如何实现axios封装

axios请求拦截器封装

axios响应拦截器的封装

用axios封装一个拦截器

axios拦截器封装案例

axios拦截器封装返回数据

二次封装一个axios并设置拦截器

使用axios封装Ajax调用数据接口

avue axios封装

axios请求拦截器

axios 如何封装一个全局请求接口

vue axios 封装请求

会员权益专享

最新资源

axios封装拦截器