vue中axios封装以及接口管理

前言一、axios的封装？二、使用步骤1.安装axios2.新建http.js（用来封装axios）引入axios环境切换设置请求超时时间请求拦截和响应拦截封装get和post方法2.新建api.js（api的统一管理）如果本篇博客对你有帮助的话，希望可以为我打call哦（关注我呦）~其它问题请留言~

---

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、axios的封装？

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios，他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。它是基于promise的http库，可运行在浏览器端和node.js中。但是在这里，先不考虑node.js。如果对axios不太了解的，可以参考一下axios文档。

axios文档地址：https://www.npmjs.com/package/axios

一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

二、使用步骤

1.安装axios

npm install axios; //

2.新建http.js（用来封装axios）

一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

引入axios

代码如下（示例）：

import axios from 'axios';

该处使用的url网络请求的数据。

环境切换

我们的项目环境可能有开发环境和生产环境。可以通过axios.defaults.baseURL可设置axios的默认请求地址。

// 环境切换 //开发环境(development) 中用到的是测试接口 生产环境 (production)中用的是真实接口 if(process.env.NODE_ENV=='development'){ axios.defaults.baseURL='http://120.53.31.103:84/api/app' } if(process.env.NODE_ENV=='production'){ axios.defaults.baseURL='https://wap.365msmk.com/' }

设置请求超时时间

//设置请求超时时间 axios.defaults.timeout=5000;

请求拦截和响应拦截

请求拦截： 我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化（进行处理）我们提交的数据。这时候，我们可以在请求发送之前进行一个拦截，从而进行我们想要的操作。 请求拦截： 响应拦截其实很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

// 请求拦截 axios.interceptors.request.use( config=>{ config.headers={DeviceType:'H5'}//请求头的设置，根据需要写入 return config; } ) // 响应拦截 axios.interceptors.response.use( response=>{ }, error =>{ if(error.response.status){ } } )

封装get和post方法

//使用promise返回axios请求的结果 (promise) export function get(url,params){ return new Promise((resolve,reject)=>{ axios.get(url,{ params:params }).then(res=>{ resolve(res); }).catch(err=>{ reject(err) }) }) } export function post(url,params){ return new Promise((resolve,reject)=>{ axios.post(url,{params:params} ).then(res=>{ resolve(res.data); }).catch(err=>{ reject(err.data); }) }) };

2.新建api.js（api的统一管理）

新建一个api.js,然后在这个文件中存放我们所有的api接口。

在api.js中引入封装的get和post方法 import {get,post} from '../http/http.js'; 封装接口实例（直接抛出） export function getBanners(){ return get('/banner') } export function teacherDetail(id){ return get('/teacher/'+id); } export function courseChapter(params){ return post('/courseChapter',params) } 页面中可以这样调用我们的api接口 async mounted(){ var cid=this.$route.query.id; var classDetails=await classDetail(cid); if(classDetails.data.code==200){ console.log(classDetails); this.classDetail=classDetails.data.data; } }

---

如果本篇博客对你有帮助的话，希望可以为我打call哦（关注我呦）~

其它问题请留言~