vue +vant 封装请求以及不同环境下请求不同的api服务器（三）

1、封装请求接口
安装axiios依赖

npm i axios -S
1

创建utils—request.js文件

// 封装请求
import axios from "axios";
//导入全局的状态管理
import store from "../store";

//创建axios请求实例dioxin
const request = axios.create({
  // 配置接口的基准路径
  baseURL: "http://api.cpengx.cn/",
});

// 拦截请求
request.interceptors.request.use(
  (config) => {
    // 判断有没有这个用户
    const { user } = store.state;
    // 有没有这个token
    if (user && user.token) {
      // 设置这个权限
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    // 请求配置好的了 传回去
    return config;
  },
  (error) => {
    // 如果请求出错了，还没发送出去，就会进行这里
    return Promise.reject(error);
  }
);

//响应拦截器
request.interceptors.response.use(
  (response) => {
    // 如果状态显示200的话，直接返回数据
    if (response.status == 200) {
      return response.data;
    } else {
      return response;
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default request;
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
40
41
42
43
44
45

3、创建api–index.js请求测试文件夹

//请求测试
import request from '../utils/request'


export const getTestapi = () =>{
    return request({
        methods:'GET',
        url:'/',
    })
}
1
2
3
4
5
6
7
8
9
10

4、在页面中引入测试接口；并测试

请求接口成功

配置不同环境下请求不同的api服务器
1、创建测试环境.env.testDev

NODE_ENV = testDev
BASE_URL = http://api.cpengx.cn
1
2

2、在package.json中scripts配置

ajax 同步请求和异步请求的差异分析

pdf 0星 超过10%的资源 26KB

下载

"testDev":"vue-cli-service serve --mode testDev"   
1

![在这里插入图片描述](https://img-blog.csdnimg.cn/8512483826284258807293514a07cef9.png

测试运行成功

1、多种环境请求不同api服务
创建.env.production文件夹 和创建.testDev文件夹一样
//.env.production文件夹内容

NODE_ENV = production
BASE_URL = http://api.cpengx.cn/production
1
2
3

2、request.js文件夹写入

// 在不同的环境下请求不同的api服务器
//生产环境下就是用生产环境的接口
//测试环境下就是用测试服务器接口
//开发环境下就用开发环境接口
let apiBaseUrl = {
  production :"http://api.cpengx.cn/production",
  developent:"http://api.cpengx.cn/development",
  testDev:"http://api.cpengx.cn/testDev",
};
console.log(process.env.NODE_ENV);
1
2
3
4
5
6
7
8
9
10

把配置接口替换掉

  // baseURL: "http://api.cpengx.cn/",
  // 不同的模式给他不同的变量
  baseURL: apiBaseUrl[process.env.NODE_ENV] || '/',
1
2
3

4、request.js全码

// 封装请求
import axios from "axios";
//导入全局的状态管理
import store from "../store";
// 在不同的环境下请求不同的api服务器
//生产环境下就是用生产环境的接口
//测试环境下就是用测试服务器接口
//开发环境下就用开发环境接口
let apiBaseUrl = {
  production :"http://api.cpengx.cn/production",
  developent:"http://api.cpengx.cn/development",
  testDev:"http://api.cpengx.cn/testDev",
};
console.log(process.env.NODE_ENV);
//创建axios请求实例dioxin
const request = axios.create({
  // 配置接口的基准路径
  // baseURL: "http://api.cpengx.cn/",
  // 不同的模式给他不同的变量
  baseURL: apiBaseUrl[process.env.NODE_ENV] || '/',
});

// 拦截请求
request.interceptors.request.use(
  (config) => {
    // 判断有没有这个用户
    const { user } = store.state;
    // 有没有这个token
    if (user && user.token) {
      // 设置这个权限
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    // 请求配置好的了 传回去
    return config;
  },
  (error) => {
    // 如果请求出错了，还没发送出去，就会进行这里
    return Promise.reject(error);
  }
);

//响应拦截器
request.interceptors.response.use(
  (response) => {
    // 如果状态显示200的话，直接返回数据
    if (response.status == 200) {
      return response.data;
    } else {
      return response;
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default request;
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

5、想运行生产环境.env.production
在 pakgage.json中script标签中 配置一下，“productionDev”:“vue-cli-service serve --mode productionDev” 然后运行npm run production