Wordpress网站开发收费人工智能培训机构
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)})}