axios拦截，api统一管理

最新推荐文章于 2024-07-08 21:52:51 发布

PicriL@Shmily

最新推荐文章于 2024-07-08 21:52:51 发布

阅读量159

点赞数

分类专栏：面试题文章标签： vue

本文链接：https://blog.csdn.net/ikun__/article/details/117513248

版权

本文介绍了在Vue项目中如何封装axios以及实现API接口的统一管理，包括环境切换、请求超时设置、请求头配置、拦截器的使用等。同时，详细阐述了API接口的组织结构和按需导入的使用方式，以及处理断网情况的策略。

摘要由CSDN通过智能技术生成

简介

axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库

axios封装步骤

1.安装axios

    npm install axios -S; // 安装axios复制代码

2.目录创建

一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import router from '../router';
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant'; 
//element-ui 的loging，和信息提示
import {Loading, Message} from 'element-ui'

3.环境切换

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀，axios、defaults、baseURL可以设置axios的默认请求地址

创建config目录

目录下创建env.development.js+env.production.js+env.test.js

env.development.js内容如下：

module.exports={
    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}

// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);

//同时 package.json的scripts需指定测试环境的模式  --mode test
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }

const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 1000*12 // 请求超时
})

4.如上设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s,就会告知用户当前请求超时，请刷新等。

5.post请求头设置