vue3.x 二次封装axios_vue3二次封装axios

1.安装axios依赖
npm i axios -S
2.创建一个utils文件，和一个api文件，在前者下面创建一个request.js的文件。该文件中引入axios
import axios from “axios”;
3.开始操作：

 /**
 * 封装axios
 */

import axios from 'axios' //引入axios的第三方插件
import {
  Message
} from 'element-ui' //按需引入ui插件
import {
  config
} from 'vue/types/umd'
//  1.创建axios实列
const service = axios.create({
  // A.公共接口
  baseURL: process.env.BASE_API,
  // B.设置接口请求超时
  timeout: 6 * 1000
})
console.log("11", service);

// 2.用创建的axios实例生成请求拦截器
service.interceptors.request.use(config => {
  // 在发送请求之前带上一些东西，config是请求的配置对象，如果直接返回就等于什么都不带
  let token = window.localStorage.token;
  if (token) {
    config.headers.Authorization = 'Bearer' + token; //如果token 存在，就带上token

  } else {
    config.headers['token'] = ''; //return
  }
  return config;
}, error => {
  return Promise.reject(error); //请求错误处理
});

// 3.用创建的axios实例生成响应拦截器
service.interceptors.response.use(response => {
  let {
    code,
    msg
  } = response.data;
  if (code == 0) {
    Message({
      type: success,
      message: msg
    })
  } else {
    Message.error(msg)
  }

  return response;
}, error => {
  Message.error('网络请求发生错误，请稍后再试')
  return Promise.reject(error)
})

// 导出两个请求方法
export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params
        })
        .then(res => {
          resolve(res.data)
        })

        .catch(err => {
          reject(err)
        })
    })
  },
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(params))
        .then(res => {
          resolve(res.data)
        })

        .catch(err => {
          reject(err)
        })
    })
  }
}


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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

4.在api下面创建一个js文件（user.js）,在该文件中引入request.js文件，开始封装接口函数
/**
引入封装好的接口方法
*/

import $http from ‘…/utils/request’

export const getUserList = paras => http.post ('url',params)
//如果把request放在全局上，那么在vue组件中就不用引入,直接在函数中用this.http.post/get(url.params)发送请求
// eg:// 引入请求函数
import {getUserList} from “@/api/user”;//引入请求接口函数

async geUsers() {
 // 请求账号列表
 let { total, data } = await getUserList ({
    currentPage: this.currentPage,
	pageSize: this.pageSize
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14