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