基础Axios封装与使用（基本流程步骤）-Toy模板网

这篇具有很好参考价值的文章主要介绍了基础Axios封装与使用（基本流程步骤）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、axios是什么？

二、axios的使用及封装（基于vue-cli）

一、安装axios

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

三、axios的基础封装

四、另种封装 — 简单封装

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

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

三、可扩展

一、axios是什么？

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

二、axios的使用及封装（基于vue-cli）

一、安装axios

npm install axios

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

axios封装和使用,axios,ajax,vue,前端,javascript

说明：.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));
    });
}

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

建立一个专门存放业务请求的文件夹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>