Vue项目基础配置：二次封装Axios 全流程解析

本文链接：https://blog.csdn.net/qq_52320207/article/details/121867433

Vue项目基础配置：二次封装Axios 全流程解析

简述📖,自己对axios及二次封装流程有点陌生了，那就来整理一下吧💻 。整理🖊 的详细一点，便于自己现在的学习，也有利于后期的复习📘 。

概述：本篇主要包括：axios的基础概念和二次封装axios的流程

什么是Axios？
1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
安装
1. npm install axios
2. 或 npm install axios --S
3. 或 npm install axios --save
4. 【注】上面三种写法意思一样。不添加 --save 或者 --S ，默认安装在dependencies 生产依赖中

项目引入axios的方法

第一种：

在main.js中

1. //引入axios
    import axios from 'axios';
    //将axios注册到vue的原型对象上
    Vue.prototype.$axios = axios;
    //为啥不使用Vue.use(),因为axios的开发者没有写install这一步 


2.  //使用方法-->在调用的组件中
    this.$axios('路由','参数').then().catch()

第二种：
1. 创建一个utils – > utils.js 文件
2. 具体参考⏬下面二次封装axios

request基础使用案例（以cnode社区🏠 接口为例–不错的社区哟😆 ）

post请求

axios.post("https://cnodejs.org/api/v1/topics", {
        accesstoken: "45e7e524-2f99-4e2e-be68-f9c66401a2f1",
        title: "深夜测试axios二次封装-wcc",
        tab: "dev",
        content: "希望我们在技术的道路上越走越远！！！",
      }).then(res => {
        console.log(res);
      })
      .catch(function (error) {
    	console.log(error);
  	  });

get请求

第一种写法,入参以查询字符串的形式拼接在后面

axios.get("https://cnodejs.org/api/v1/topics?page=1&tab=ask&limit=10&mdrender=false")
      .then(res =>{
        // 成功时执行
        console.log(res);
      })
      .catch(error => {
        // 错误时执行
        console.log(error);
      });

第二种写法，以对象的形式传入{params:{}}

axios.get("https://cnodejs.org/api/v1/topics",{
        params:{
          page:1,
          tab:'ask',
          limit:10,
          mdrender:false
        }
      })
      .then(res =>{
        // 成功时执行
        console.log(res);
      })
      .catch(error => {
        // 错误时执行
        console.log(error);
      });

二次封装axios

新建文件夹 utils -->utils.js

第一步：引入所需的配置

import axios from 'axios'; //引入axios
import { Message,Loading} from 'element-ui' //按需引入 消息提示/加载 ---以服务的方式使用(服务：参考element-UI官网)
import qs from 'qs'; //参数序列化，把数据格式转为 x-www-form-urlencoded（post的默认格式）
/* 
  qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 
    qs.parse()将URL解析成对象的形式 -- 键值对
    qs.stringify()将对象 序列化成URL的形式，以&进行拼接 -- 查询字符串
*/

第二步：判断当前所运行的环境–这一块内容是和***proxyTable*** 联动的

let BASE_URL = '',loadingInstance;
let HOST = process.env.NODE_ENV;
console.log(HOST);
switch (HOST) {
  //development代表本地开发环境
  case 'development':
    BASE_URL = '/api';
    break;
   //production代表线上环境（包括dat、uat和生产环境等）
  case 'production':
    BASE_URL = '/';
    break;
  default:
    BASE_URL = '/api';
}
/* 
  在node中，有全局变量process表示的是当前node进程
  process.env 包含着关于系统环境的变量，但是process.env中并不存在NODE_ENV这个东西。
  NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。
  【注】process.env.NODE_ENV是我们执行脚本命令时添加上去的一个全局环境变量。
*/

第三步：配置***axios***默认值（两种情况，参考官方文档）

全局axios默认值（本例子采用的方法）

自定义实例默认值

// 全局的axios默认值--不止这些
axios.defaults.timeout = 5000;//超时设置
axios.defaults.baseURL = BASE_URL ;//请求根路径
axios.defaults.headers.post['content-type']='application/x-www-form-urlencoded';//自定义请求头

第四步：request请求拦截器

在发送请求之前做一些事情 ,

添加统一cookie
请求体加验证
设置请求头
或者没有token就跳转到登录页面
相当于是对每个接口里相同操作的一个封装；

axios.interceptors.request.use((config) => {
  console.log(config);
  config.data = qs.stringify(config.data);
  // let token=localStorage.getItem('token');
  // token && (config.headers.Authorization=token);//请求携带token
  //  token &&Object.assign(config.headers,{Authorization:token}); 另一种写法
  // config.headers = {
  //     'Content-Type': 'application/x-www-form-urlencoded'  //转换数据格式
  // }
  // 以服务的方式调用Loading --> 返回loading的实例
  loadingInstance = Loading.service({
    lock: true,
    text: '内容正在加载中', //显示在加载图标下方的加载文案
  });
  return config;
}, error => {
  // 做一些有请求错误的事情
  return Promise.reject(error);
})

第五步：response响应拦截器

请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等

xios.interceptors.response.use(response => {
  // 对响应数据做一些事情
  setTimeout(() => {
    // 服务的方式：关闭遮罩层的方法
    loadingInstance.close();
  }, 300)
  return response;
}, error => {
  setTimeout(() => {
    loadingInstance.close();
  }, 300)
  let {
    response
  } = error;
  if (response) {
    // 服务器有返回内容
    let errormsg = '';
    switch (response.status) {
      case 400:
        errormsg = '错误请求'
        break;
      case 401:
        errormsg = '未登录,请重新登录'
        break;
      case 403:
        errormsg = '决绝访问'
        break;
      case 404:
        errormsg = '请求错误，未找到该资源'
        break;
      case 405:
        errormsg = '请求方法未允许'
        break;
      case 408:
        errormsg = '请求超时'
        break;
      case 500:
        errormsg = '服务器出错'
        break;
      case 501:
        errormsg = '网络未实现'
        break;
      case 502:
        errormsg = '网络错误'
        break;
      case 503:
        errormsg = '服务不可用'
        break;
      case 504:
        errormsg = '网络超时'
        break;
      case 505:
        errormsg = 'http版本不支持该请求'
        break;
      default:
        errormsg = '连接错误'
    }
    // Message 全局方法
    Message({
      type: 'error',
      message: errormsg
    });
    return false;
  } else {
    //服务器连结果都没有返回  有可能是断网或者服务器崩溃
    // window.navigator包含浏览器厂商和版本等一些信息
    if (!window.navigator.online) {
      //断网处理
      Message('网络中断');
      return;
    } else {
      //服务器崩了
      Message('服务器崩了');
      return Promise.reject(error);//promise pending(进行中)-->rejected(失败)
    }
  }
})

第六步：GET和POST请求方式封装

GET请求

/*
*GET 方法，对应get请求
*@param {String} url [请求的url地址]
*@param {Object} params[请求携带的参数]]
*/
export function get(url,params){
    return new Promise((resolve,reject) => {
        axios.get(url,{
            params:params
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
        })
    })
}

POST请求

/*
*post 方法，对应post请求
*@param {String} url [请求的url地址]
*@param {Object} params[请求携带的参数]]
*/


export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data);
            })
    });
}

第七步：统一处理接口

新建api–> index.js文件

import {
  get,
  post
} from '@/utils/utils.js';
// 新建主题
// export const newTheme =  params =>post('/api/v1/topics',params);
// export const getTopics =  params =>get('/api/v1/topics',params);
const $CNodeApi = {
  // 新建主题
  newTheme: params =>post('/api/v1/topics',params),
  // 获取主题
  getTopics:params =>get('/api/v1/topics',params),
}
export default $CNodeApi;

第八步：使用接口

在HelloWorld.vue 引入，不同写法不同引入方式

// import { newTheme,getTopics } from "@/api/index";
import $CNodeApi from "@/api/index";

//方法中调用
submit() {
      $CNodeApi.newTheme({
        accesstoken:'45e7e524-2f99-4e2e-be68-f9c66401a2f1',
        title:'深夜测试axios二次封装-wcc',
        tab:'dev',
        content:'希望我们在技术的道路上越走越远！！！'
      }).then(res => {
        console.log(res);
        // this.$message({
        //   message: '恭喜你，新建主题成功',
        //   type: 'success'
        // });
      })