目录
 
前言
正文
一、vue项目的前期配置
二、配置config文件中的代理地址
vue cil2旧版本的代理配置——config/index.js
vuecil 3+ 新版本的代理配置--vue.config.js 文件
   
三、封装axios实例 —— request.js
四、封装请求——http.js
五、正式封装API，用于发送请求——api.js
六、如何在vue文件中调用
  
结语

 
前言
 
在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。
 
 
 
如果你能看到这篇文章，鉴于有很多小白可能会参考我这篇文章来进行前期配置，特说明下正式配置路线：
 
 
拿到项目及后台接口，首先做的是配置全局代理及第二点；
全局封装axios及第三点request.js；
过滤axios请求方式，控制路径及参数的格式及第四点http.js；
正式封装api及第五点api.js；
页面调用；
 
 
正文
 
一、vue项目的前期配置
 
新建vue项目，下载axios，并在main.js中导入axios
 
npm i axios -S
 
//main.js
import axios from "axios";
 
二、配置config文件中的代理地址
 
在项目config目录下的修改 index.js文件，这里是主要书写配置多个后台接口。关于代理可能出现的问题，可以查看我的另一篇文档VueCil代理本地proxytable报错的解析；
 
vue cil2旧版本的代理配置——config/index.js
 
 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088
    proxyTable: {
      '/testIp': {
        target: 'http://197.82.15.15:8088',
        changeOrigin: true,
        pathRewrite: { 
          '^/testIp': ''
        }
      },
      '/elseIp': {
        target: 'http://182.83.19.15:8080',
        changeOrigin: true,
        pathRewrite: { 
          '^/esleIp': ''
        }
      },
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

 
vuecil 3+ 新版本的代理配置–vue.config.js 文件
 
关于多代理配置：
 
		 devServer: {
            overlay: { // 让浏览器 overlay 同时显示警告和错误
              warnings: true,
              errors: true
            },
            host: "localhost",
            port: 8080, // 端口号
            https: false, // https:{type:Boolean}
            open: false, //配置后自动启动浏览器
            hotOnly: true, // 热更新
            // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
            proxy: { //配置多个代理
                "/testIp": {
                    target: "http://197.0.0.1:8088",
                    changeOrigin: true,
                    ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/testIp": "/"
                    }
                },
                "/elseIp": {
                    target: "http://197.0.0.2:8088",
                    changeOrigin: true,
                    //ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/elseIp": "/"
                    }
                },
            }
        }
 
其中vue.config.js详细参考我另一篇博客：vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置
 
如果有多后台，就可以在api文件夹下另外新建一个elseApi.js ，书写当前ip下的接口请求。方法同上，只是 let resquest = "/elseIp/request/" 调用的时候把端口更改一下。
 
三、封装axios实例 —— request.js
 
在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。
 
/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message} from 'element-ui';
//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: process.env.BASE_API,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
   config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
   config.headers = {
     'Content-Type':'application/x-www-form-urlencoded' //配置请求头
   }
   //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
   const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
   if(token){
      config.params = {'token':token} //如果要求携带在参数中
      config.headers.token= token; //如果要求携带在请求头中
    }
  return config
}, error => {
  Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等
  
  return response
}, error => {
   /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权，请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        window.location.href = "/NotFound"
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时，请刷新当前页')
    }
    error.message = '连接服务器失败'
  }

  Message.error(error.message)
  /***** 处理结束 *****/
  //如果不需要错误处理，以上的处理过程都可省略
  return Promise.resolve(error.response)
})
//4.导入文件
export default service
 
特殊说明：
 
 
 
鉴于有很多朋友问关于数据转换这块的问题，特在页面中单独回复一下！
 
 
config.data = JSON.stringify(config.data);
config.headers = { 'Content-Type':'application/x-www-form-urlencoded'  }
const token = getCookie('名称')
if(token){ 
  config.params = {'token':token} ; 
  config.headers.token= token; 
}
 
 
上述的代码都是请求的配置项，非必须，也是分情况的，data/headers /params 这种本身的参数都有多种，和后台沟通，需要什么就配什么！
 config.data = JSON.stringify(config.data);为什么不用qs.stringify，因为我的后台想要的只是json类型的传参，而qs转换会转换成为键值对拼接的字符串形式。当然你们后台需要传递字符串类型参数，那就换成qs或者其他格式方式。
 const token = getCookie('名称')这是token的取值，在取之前你肯定需要发请求拿到token，然后setCookie存起来，而名称就是你存的token的名称，每个人的不一样；
 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' }请求头内容的配置，也是不同的，application/x-www-form-urlencoded ：form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式），你可以根据实际情况去配置自己需要的；
 如果最终配完成后，报错连接服务器失败，那是正常的，因为示例配置的服务器地址http://197.0.0.2:8088是假地址，需要替换成自己服务器；
 
 
 
 
以上
 我已经举了很清晰的例子，写代码的过程是自己动脑去搭建工程的，希望能看到我文章的各位，善于搜索，善于思考，善于总结；
 当然我很喜欢帮大家解决问题，但是相关的基础问题，还是建议自己去学习掌握。
 
 
四、封装请求——http.js
 
在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。
 
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http
 
五、正式封装API，用于发送请求——api.js
 
在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。
 
写法一：适合分类导出
 
import http from '../utils/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export function getListAPI(params){
    return http.get(`${resquest}/getList.json`,params)
}
// post请求
export function postFormAPI(params){
    return http.post(`${resquest}/postForm.json`,params)
}
// put 请求
export function putSomeAPI(params){
    return http.put(`${resquest}/putSome.json`,params)
}
// delete 请求
export function deleteListAPI(params){
    return http.delete(`${resquest}/deleteList.json`,params)
}

 
写法二：使用全部导出
 
import http from '../utils/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export default{
 	getListAPI(params){
    	return http.get(`${resquest}/getList.json`,params)
	},
	 postFormAPI(params){
    	return http.post(`${resquest}/postForm.json`,params)
	}
}
 
注意：一个项目中如果后台请求不是同一个ip，而是多个ip的时候，可以在api文件夹下建立多个js，用来调用请求。
 我们看下之前遗留的一个问题：
 
//创建新的axios实例，
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 3 * 1000
})
 
在之前封装公共接口的baseUrl时候，用了webpack中的全局变量process.env.BASE_API，而不是直接写死ip，也是为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况。
 
以上 关于配置环境 和接口 基本搭建完毕，下面看一下调用：
 
六、如何在vue文件中调用
 
方法一：用到哪个api 就调用哪个接口——适用于上文接口分类导出；
 
 import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'

  methods: {
      //promise调用，链式调用， getList()括号内只接受参数；
      //   get不传参
      getList() {
        getListAPI().then(res => console.log(res)).catch(err => console.log(err))
      },
		//post传参
      postForm(formData) {
        let data = formData
        postFormAPI(data).then(res => console.log(res)).catch(err => console.log(err))
      },

      //async await同步调用
      async postForm(formData) {
        const postRes = await postFormAPI(formData)
        const putRes = await putSomeAPI({data: 'putTest'})
        const deleteRes = await deleteListAPI(formData.name)
        // 数据处理
        console.log(postRes);
        console.log(putRes);
        console.log(deleteRes);
      },
   }
 
方法二 ：把api全部导入，然后用哪个调用哪个api——适用于全部导出
 
   import api from '@/api/api'
   methods: {
     getList() {
        api.getListAPI(data).then(res => {
          //数据处理
        }).catch(err => console.log(err))
      }
    }  
 
结语
 
以上就详细介绍了，在vue-cil项目中 如何封装axios，封装请求，封装公共的api，配置多个接口，页面如何调用请求等问题，都是亲测有用的~ 但是这种封装方法的话，更适合大中型项目，配置比较合理，如果是自己小项目，就直接用axios就完事了。。。
 
补充：
 
关于代理的配置及若出现配置代理报错404的问题，可以参考我的文章：代理的配置来解决；
vue3学习：vue3.0中如何使用router路由、vuex、element-plus
 
如果本文对你有帮助的话，请不要忘记给我点赞打call哦~o(￣▽￣)ｄo
 有其他问题留言 over~

1、封装的含义：封装是实现面向对象程序设计的第一步，封装就是将数据或函数等集合在一个个的单元中（我们称之为类）。被封装的对象通常被称为抽象数据类型。
 
2、封装的作用：封装的作用在于保护或者防止代码（数据）被我们无意中破坏。在面向对象程序设计中数据被看作是一个中心的元素并且和使用它的函数结合的很密切，从而保护它不被其它的函数意外的修改。
 
3、如何封装：封装提供了一个有效的途径来保护数据不被意外的破坏。相比我们将数据（用域来实现）在程序中定义为公用的（public）我们将它们(fields)定义为私有的（private）在很多方面会更好。私有的数据可以用两种方式来间接的控制。第一种方法，我们使用传统的存、取方法。第二种方法我们用属性（property），使用属性不仅可以控制存取数据的合法性，同时也提供了“读写”、“只读”、“只写”灵活的操作方法。
 
4、什么情况下封装：编写实例类时，用到封装有很多好处，其中比较实际的是：
 
拒绝直接调用声明字段，保护内部数据，更安全；
在编程中可达到缓存的效果，执行效率高；
重复调用，避免代码冗余，程序编写效率高。

 
文章目录
 
5 网络基础知识储备
5.1 OSI七层模式
5.2 TCP/IP协议栈
5.3 描述TCP协议状态机及三次握手四次挥手过程
5.4 loopback网卡功能
5.5 描述数据包封装解封装过程
5.5.1 封装
5.5.2 解封装
小结
     
5.6 端口号的作用及常用的协议端口号有哪些
5.7 IP模块
5.8 基础路由和交换技术
   
  
 

 
5 网络基础知识储备
 
5.1 OSI七层模式
 
OSI七层模式
 
5.2 TCP/IP协议栈
 
TCP/IP协议栈
 
5.3 描述TCP协议状态机及三次握手四次挥手过程
 
TCP协议状态机及三次握手四次挥手过程
 
5.4 loopback网卡功能
 
loopback网卡功能
 
5.5 描述数据包封装解封装过程
 
5.5.1 封装
 
是将对象运行所需的资源封装在程序对象中——基本上，是方法和数据。
 
封装过程
 
  
应用层：原始数据被转换成二进制数据
传输层：二进制数据被分割成小的数据段，并封装TCP头部 （数据段）
 （TCP头部的关键信息–端口号）
网络层：传输层传来的数据被封装上IP头部 （数据包）
 （IP头部的关键信息–IP地址）
数据链路层：网络层传来的数据被封装上MAC头部 （数据帧）
 （MAC头部的关键信息–MAC地址）
物理层：二进制数据组成的比特流转化为电信号在网络中传输 （比特流）
 
 
 
5.5.2 解封装
 
接收数据的时候，会一层一层的把包头去掉
 
解封过程
 
  
物理层：将电信号转化为二进制数据，并将其送至数据链路层
数据链路层：查看MAC地址，地址是自己，就拆掉MAC头部，继续传输
 地址不是自己，就丢弃数据
网络层：查看IP地址，地址是自己，就拆掉IP头部，继续传输
 地址不是自己，就丢弃数据
传输层：查看TCP头部，判断应该传到哪里，然后重组数据，传输到应用层
应用层：二进制转化为原始数据
 
 
小结
 
TCP通信的数据封装解封过程
 
 
5.6 端口号的作用及常用的协议端口号有哪些
 
端口号的作用及常用的协议端口号
 
5.7 IP模块
 
IP模块
 
5.8 基础路由和交换技术
 
基础路由和交换技术