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)
})
}
