vue.cli项目封装全局axios，请求封装，封装公共的api和调用请求_vue-cli3 api接口封装和使用

vue.cli项目封装全局axios，请求封装，封装公共的api和调用请求

正文

1.vue项目的前期配置

新建vue的项目，下载axios ，并且在main.js中导入axios

npm i axios -S
//main.js
import axios from "axios"
1
2
3

2.配置config文件中的带地址

vuecli 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": "/"
                    }
                },
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

封装axios实例 —request.js

在项目src目录下新建utils文件夹，然后在里面新建request.js文件

// 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
timeout:3*1000
})

//2.请求拦截器
service.interceptors.request.use(config=>{
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18