目录

一、axios是什么？

axios是基于promise开发公司封装的请求库，开发公司它可作用于浏览器和NODE，开发公司相较于普通的ajax请求，开发公司它自身新加了拦截器、开发公司为请求添加附加条件等新特性。

二、axios开发公司的使用及封装（基于）

一、

npm install axios

二、开发公司搭建一个目录结构（开发公司考虑区分开发和生产环境）

说明：.env.dev 和 .env.prod 开发公司是在由开发环境切换到开发公司生产环境打包或启动时使用。开发公司因为在封装axios时，开发公司你进需要通过node开发公司中的环境变量process.env即可取到当前加载的配置文件，通过配置来判断不同的阶段。下面解释一下两个文件如何放?以及如何配置使用？【.env.dev .end.prod】


 
//在使用vue-cli构建的项目中，在根目录下【与vue.config.js同级】新建 .env.dev 和 .env.prod 文件
//该文件格式必须使用 = 的键值对
 
//NODE_ENV为固定键  值为当前处于开发环境
NODE_ENV = "development" 
 
//BASE_URL为固定键  值为当前的基础请求地址【该值也可在axios封装时写】
BASE_URL = "http://123.com.cn"   
 
//以上两个键为配置文件中可直接使用的键，但是要在配置文件中使用其他键，则必须添加前缀 VUE_APP_
 
//【VUE中】所有解析出来的环境变量都可以在 public/index.html 中以 【HTML 插值】中的方式使用。
/*
    <%= value %> 直接插值
    <%- value%> 可以转换成html标签的
    <link href="<%= BASE_URL %>favicon.ico">
*/

该配置可在切换生产和开发环境时通过指令一键切换。通过执行不同的 npm run dev等启动服务【package.json】


"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve --mode dev",
    "prod": "vue-cli-service serve --mode prod",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

三、axios的基础封装

提前考虑：1.要区分是开发环境或生产环境 2.超时问题 3.代理问题 4.基础地址问题 5.拦截器需要做什么 6.权限添加验证cookie 或 tooken。【http.js】


import axios from "axios";
 
//不同环境下的地址
let baseURL = "";
//node中的环境变量process.env,也就是我们新增开发、生产的配置文件
if(process.env.NODE_ENV === "development"){
    baseURL = "http://localhost:8080"  //这里可在vue.config.js做一个代理【代理代码见下】
}else{
    baseURL = "123.com.cn"
}
 
//创建axios实例
const request = axios.create({
    timeout: 5000,
    baseURL:baseURL
});
 
//所有请求设置了授权头信息【请求头中设置cookie信息，一直携带，判权】
axios.defaults.headers.common['Authorization'] = `${cookie}`;
//这里是设置发送json格式参数
axios.defaults.headers.post['Content-Type'] = 'application/json';
 
//请求拦截器
request.interceptors.request.use(
    //发送之前想要做些什么
    config => {
        // token是否过期，是否重新登陆等等
        // 此处可修改一些基本数据
        // config[baseURL,[data,[headers,[method,[timeout,[url]   等
        //        基础地址,请求参数,头部, 请求方式, 超时,  请求地址  等
 
        // config.headers.Cookie = "110110110110110110";
        return config;
    },
    //方法返回一个带有拒绝原因的 Promise 对象。
    error => Promise.reject(error)
);
/**************移除拦截器****************/
    // 动态移除
    // const me = axios.interceptors.request.use(function () {/*...*/});
    // axios.interceptors.request.eject(me);
/***************************************/
 
//响应拦截器（对请求结束后进行一些操作，，例如:统一收集报错）
request.interceptors.response.use(
    //请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
    //请求失败
    error => {
        //可根据不同的状态去区分不同的错误，达到不同效果
        if(error.response.status){
            error.response.status === 404 ? alert("请求不存在！！") : alert("其他");
        }
        return Promise.reject(error);
    }
);
 
export default request

在vue.config.js配置文件中对我们的请求做一个代理。


const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,//关闭语法检查
  //方式一
/* 
   devServer:{//代理
     proxy:'http://localhost:3000'
   }
*/
   //方式二
   devServer:{
     proxy:{
      "/":{
        target:"https:localhost:3000",//代理到的服务器地址
        ws:false,//是否对websocket启动代理
        changeOrigin:true,//用于控制请求头中的值
      }
     }
   }
})

四、另种封装 — 简单封装

在项目中，如果请求数量少，请求简单，限制条件较少，则可使用一种简单的方法进行封装调用。


import axios from "axios";
 
//封装对应的get请求
const get = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, {params})
        .then(res => resolve(res))
        .catch(err => reject(err));
    });
}
//封装对应的post请求
const post = (url, param) => {
    return new Promise((resolve, reject) => {
        axios.post(url, param)
        .then(res => resolve(res))
        .catch(err => reject(err));
    });
}

五、后业务请求的封装使用

建立一个专门存放业务请求的文件夹api【这里根据业务需求：有的会存在两个文件夹，接口文件和接口业务执行文件】,api文件中放各个业务js的文件，并且设置统一的导出文件index.js即可

业务1.js


//封装的请求
import axios from '../http'
//参数序列化方法 <最后的结果也就是&a=1&b=2>
import qs from 'qs'
 
export default {
    //登录
    loginIn(params){
        return axios.post('/loginIN',qs.stringify(params));
    },
    //退出
    loginOut(params){
        return axios.post('/loginIN',params);
    },
    //注册
    loginUp(params){
        return axios.get('/loginIN',{params});
    }
}

业务2.js


import axios from '../http'
import qs from 'qs'
export default {
    //更新列表
    refreshList(params){
        return axios.post('/refreshList',qs.stringify(params));
    },
    //更新提示
    refreshTips(params){
        return axios.post('/loginIN',params);
    }
}

业务3.js


import axios from '../http'
 
export default {
    poetryPost(params){
        return axios.post('/all.json',params);
    },
    poetryGet(){
        return axios.get('/all.json');
    }
}

index.js


import loginAPI from './业务1'
import refreshData from './业务2'
import initPoetry from './业务3'
 
export {
    loginAPI,
    refreshData,
    initPoetry
}

六、在页面代码中使用封装的业务请求app.vue

原先将axios放在vue的实例身上，这样就可以直接用this；但是v3的this没有了，所以现在也不推荐这样做了。应该避免每次都使用axios.create创建实例，实例过多既会占据内存也会影响效率。


<template>
  <div>
    <h1>诗句：{{content}}</h1>
    <h2>诗句：{{content2}}</h2>
  </div>
</template>
 
<script>
//使用不区分V2、V3
import { initPoetry } from './axiosRequest/api/index'
export default {
    data(){
      return {
        content:"",
        content2:""
      }
    },
    mounted(){
      initPoetry.poetryPost({a:1}).then(
        res => this.content = res.data.content,
        err => console.log(err)
      ).catch(
        err => console.log(err)
      );
      initPoetry.poetryGet().then(
        res => this.content2 = res.data.content,
        err => console.log(err)
      ).catch(
        err => console.log(err)
      );
    }
}
</script>

三、可扩展

至此一个基于vue-cli搭建项目的基础axios封装就完成了，在此基础上可将封装进行扩展，使得更丰富与健壮。

开发公司基础Axios封装与使用（基本流程步骤）