5.vue中axios封装工程化

vue工程化中axios封装

视频演示地址：https://www.bilibili.com/video/BV121egeQEHg/?vd_source=0f4eae2845bd3b24b877e4586ffda69a
通常我们封装需要封装request.js基础的发送请求工具类，再根据业务封装service类，service类是具体业务的接口封装，在页面上直接调用的是servive类的接口。下面是封装过程

1.axios常用api请求

封装之前，我们先熟悉一下axios原生是怎么发送请求的，原生发送请求的方式是直接写请求地址和参数、处理响应的，但在项目中，如果我们需要把开发环境地址改成生产环境地址，需要修改很多地方的接口，并且每个地方都写这么一大串代码，可读性和复用性非常低，因此需要进行封装。

原生get请求：

//get请求: 
// 参数一：param1  请求地址
//参数二：请求参数配置信息
//params:请求参数，会以url的形式拼接到请求地址后
//headers：请求头
axios.get('/user?ID=12345',{params:{},headers:{}
}).then(function (response) {// 处理成功情况console.log(response.data);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});

原生post请求：

//post：请求，三个参数
// 参数一：请求地址
// 参数二：请求参数
// 参数三：配置信息
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

2.封装request.js

下面开始进行封装：

2.1 vue工程的 src下建立utils文件夹，创建request.js文件。

主要将通用的get请求，post请求进行封装，提取出域名网址

封装请求拦截，用于在发送请求前做一些通用处理，比如加token验证等等

封装响应拦截处理，用于处理通用的响应，比如返回不同的状态码时，给予路由跳转等等

代码如下

import axios from "axios";const axiosInstance = axios.create({baseURL: 'https://api.uomg.com', //测试域名，根据实际情况修改timeout: 4000,
})// 全局请求拦截
axiosInstance.interceptors.request.use(function (config) {// console.log('全局请求拦截');return config;}, function (error) {return Promise.reject(error);}
);
// 全局响应拦截
axiosInstance.interceptors.response.use(function (response) {// console.log('全局响应拦截');return response;}, function (error) {return Promise.reject(error);}
);export function get(url, params){return axiosInstance.get(url, {params: params})
}export function post(url, data){return axiosInstance.post(url, data)
}

3.封装serve层

创建src/api/service文件夹，例如对login业务进行封装，可以创建loginService.js，直接在此处写请求接口，只放开数据让具体的页面进行调用

import {post,get} from '../../utils/request'/*** 登录接口* @param {*} params * params.username  xxxxx* params.password  xxxxx*/
export function login(params){return get('/api/icp', {username: params.username,password: params.username,domain: 'qrpay.uomg.com'})
}

4.页面测试

在vue界面上找一个控件，点击调用刚刚封装的login接口，正确打印信息即可

testAxios(){login({}).then((res)=>{console.log(res)})}