axios插件

中文文档地址

https://www.axios-http.cn/docs/intro

简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

安装

使用 npm:

$ npm install axios

$ cnpm install axios //taobao源

或者使用cdn：

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

执行 GET 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

1
2
3
4
5
6
7
8
9
10
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

1
2
3
4
5
6
7
8
9
10
11
12
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
1
2
3
4
5
6
axios.all(
	[
		getuserfn(),
		grtuserfn2()
	]
).then(axios.spread(acct,pers){})

创建axios对象

1
2
3
4
5
6
7
const fetch = axios.create({
    // baseURL: 'http://f39bwd.natappfree.cc',
    baseURL: process.env.VUE_APP_API_BASE_URL,
    timeout: 20000,
    withCredentials: false, //https接口时改为true
});

Interceptors拦截

请求拦截器

1
2
3
4
5
6
7
fetch.interceptors.request.use((config) => {
    if (config.url.indexOf('/login') == -1) {
        // config.headers.common.token = 'Bearer ' + localStorage.getItem("token");
        // config.headers.common.token = localStorage.getItem("token");
    }
    return config;
}, err => Promise.reject(err));

设置token

1
config.headers['Token'] = getToken()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      // config.headers['X-Token'] = getToken()
      config.headers['Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

响应拦截器

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
fetch.interceptors.response.use((response) => {
    const { status, data } = response;
    if (status === 200) {
        if (data.status != 1) {
            // count += 1
            // if (count == 1) {
            //     MessageBox.confirm('登录失效，请您重新登陆', '登录失效', {
            //         confirmButtonText: '确定',
            //         // type: 'warning',
            //         showCancelButton: false,
            //         showClose: false,
            //         customClass: 'btn-center',
            //         closeOnClickModal: false, //是否可通过点击遮罩关闭MessageBox
            //         closeOnPressEscape: false, //是否可通过按下ESC键关闭MessageBox
            //         closeOnHashChange: false //是否在hashchange时关闭MessageBox
            //     }).then(() => {
            //         window.localStorage.clear()
            //         window.location.href = '/'
            //     }).catch(() => {

            //     })
            // }
        }
        return data;
    }
    return Promise.reject(data);
}, (err) => {
    return Promise.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
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);


let res = response.data;
if(res.status == 0){
	成功时
}else if(res.status == 10){
未登录时
window.localtion.href == '登录页'
}
  });

axios配置

axios.defaults.baseURL = ‘/api’

超时axios.defaults.timeout = 8000

拦截Interceptors

1
2
3
4
5
6
7
8
9
axios.interceptors.response.use(function (response) {
	let res = response.data;
if(res.status == 0){
	成功时
}else if(res.status == 10){
未登录时
window.localtion.href == '登录页'
}
}

使用

1
2
3
4
5
6
7
8
9
https://www.cnblogs.com/zhouyangla/p/6753673.html

下载
$ npm install axios

引入
//main.js
import axios from 'axios'
Vue.prototype.$http = axios

axiosAPI和普通调用

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
引入封装好的axios
import { axios } from '@/utils/request'



axioxAPI   get
export function tTaskBaseInfo(parameter){
    return axios({
        url:'/backend/zz-event/eventTypeAnalysis',
        method:'get',
        params:parameter
    })
}


axioxAPI   post
 export function tTaskBaseInfopost(parameter){
    return axios({
        url:'/backend/zz-event/eventTypeAnalysis',
        method:'post',
        data:parameter
    })
}


axios  普通调用
export function tTaskBaseInfo(parameter){
    return axios.get('/backend/zz-event/eventTypeAnalysis', {
        params: parameter
      })
}

vue axios post请求后台收不到问题（需要把数据转FormData格式

方法1 request拦截

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
service.interceptors.request.use(config => {
    // const token = Vue.ls.get(ACCESS_TOKEN)
    // if (token) {
    //     config.headers['Authorization'] = 'Bearer ' + token
    // }
    console.log('config', config);
    if (config.method == 'post') {
        const data = JSON.parse(JSON.stringify(config.data));
        const formData = new FormData()
        for (var i in data) {
            formData.append(i, data[i])
        }
        config.data = formData
    }

    return config
}, err)

方法2

import qs from ‘query-string’; 

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
axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // let each request carry token
    // this example using the JWT token
    // Authorization is a custom headers key
    // please modify it according to the actual situation
    const token = getToken();
    if (token) {
      if (!config.headers) {
        config.headers = {};
      }
      config.headers.Authorization = `Bearer ${token}`;
    }
    if (config.method == 'post') {
      config.data = qs.stringify(config.data);
    }

    console.log('config', config);

    return config;
  },
  (error) => {
    // do something
    return Promise.reject(error);
  }
);

axios极简封装案例

环境变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.env.development   文件
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_DIR = 'dist'
VUE_APP_API_BASE_URL='http://lfywl.natapp4.cc'

.env.production   文件
NODE_ENV = 'production'
VUE_APP_MODE = 'production' 
VUE_APP_DIR = 'dist'
VUE_APP_API_BASE_URL='http://lfywl.natapp4.cc'

.env.test 	 文件
NODE_ENV = 'test' //模式
VUE_APP_MODE = 'test' //通过VUE_APP_MODE变量来区分环境
VUE_APP_DIR = 'dist'
VUE_APP_URL = 'http://' //测试环境对应的后端接口
VUE_APP_API_BASE_URL='http://lfywl.natapp4.cc'

封装案例

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
import axios from 'axios'
import { message, Modal } from "ant-design-vue";
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi'
import cache from '@/utils/cache'
import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'

import store from "@/store";

let downloadLoadingInstance;
// 是否显示重新登录
export let isReLogin = { show: false };

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    // baseURL: import.meta.env.VITE_APP_BASE_API,
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
        // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
    if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?' + tansParams(config.params);
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
        const requestObj = {
            url: config.url,
            data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
            time: new Date().getTime()
        }
        const sessionObj = cache.session.getJSON('sessionObj')
        if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
            cache.session.setJSON('sessionObj', requestObj)
        } else {
            const s_url = sessionObj.url; // 请求地址
            const s_data = sessionObj.data; // 请求数据
            const s_time = sessionObj.time; // 请求时间
            const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
            if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
                const message = '数据正在处理，请勿重复提交';
                console.warn(`[${s_url}]: ` + message)
                return Promise.reject(new Error(message))
            } else {
                cache.session.setJSON('sessionObj', requestObj)
            }
        }
    }
    return config
}, error => {
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const msg = errorCode[code] || res.data.msg || errorCode['default']
            // 二进制数据则直接返回
        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
            return res.data
        }
        if (code === 401) {
            if (!isReLogin.show) {
                isReLogin.show = true;
                Modal.confirm({
                    title: '系统提示',
                    content: '登录状态已过期，您可以继续留在该页面，或者重新登录',
                    cancelButtonProps: {style: {display: 'none'}},
                    onOk() {
                        isReLogin.show = false;
                        // useUserStore().logOut().then(() => {
                        //     location.href = '/';
                        // })
                        store.dispatch('user/logOut').then(() => {
                            location.href = '/';
                        })
                    },
                    onCancel() {
                        isReLogin.show = false;
                    },
                })
            }
            // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
        } else if (code === 402) {
            message.error(msg)
            setTimeout(() => {
                store.dispatch('user/logOut').then(() => {
                    location.href = '/';
                })
            },1000)

            return Promise.reject(new Error(msg))
        } else if (code === 500) {
            message.error(msg)
            return Promise.reject(new Error(msg))
        } else if (code !== 200) {
            message.error(msg)
            return Promise.reject('error')
        } else {
            return Promise.resolve(res.data)
        }
    },
    error => {
        console.log('err' + error)
        let msg = error.message;
        if (msg == "Network Error") {
            msg = "后端接口连接异常";
        } else if (msg.includes("timeout")) {
            msg = "系统接口请求超时";
        } else if (msg.includes("Request failed with status code")) {
            msg = "系统接口" + msg.substr(msg.length - 3) + "异常";
        }
        message.error(msg)
        return Promise.reject(error)
    }
)

// 通用下载方法
export function download(url, params, filename) {
    downloadLoadingInstance = message.loading('正在下载数据，请稍候', 0)
        // downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
    return service.post(url, params, {
        transformRequest: [(params) => { return tansParams(params) }],
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        responseType: 'blob'
    }).then(async(data) => {
        const isLogin = await blobValidate(data);
        if (isLogin) {
            const blob = new Blob([data])
            saveAs(blob, filename)
        } else {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
            message.error(errMsg);
        }
        downloadLoadingInstance;
    }).catch((r) => {
        console.error(r)
        message.error('下载文件出现错误，请联系管理员！')
        downloadLoadingInstance;
    })
}

export default service


参考地址
https://blog.csdn.net/ProGrammerXu/article/details/119986102

1fetch.js

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
import axios from 'axios'
import { MessageBox } from 'element-ui'

const fetch = axios.create({
    // baseURL: 'http://f39bwd.natappfree.cc',
    baseURL: process.env.VUE_APP_API_BASE_URL,
    timeout: 20000,
    withCredentials: false, //https接口时改为true
});

var count = 0 //控制弹窗只出现一次
    // 请求拦截器
fetch.interceptors.request.use((config) => {
    if (config.url.indexOf('/login') == -1) {
        // config.headers.common.token = 'Bearer ' + localStorage.getItem("token");
        // config.headers.common.token = localStorage.getItem("token");
    }
    return config;
}, err => Promise.reject(err));

// 响应拦截器
fetch.interceptors.response.use((response) => {
    const { status, data } = response;
    if (status === 200) {
        if (data.status != 1) {
            // count += 1
            // if (count == 1) {
            //     MessageBox.confirm('登录失效，请您重新登陆', '登录失效', {
            //         confirmButtonText: '确定',
            //         // type: 'warning',
            //         showCancelButton: false,
            //         showClose: false,
            //         customClass: 'btn-center',
            //         closeOnClickModal: false, //是否可通过点击遮罩关闭MessageBox
            //         closeOnPressEscape: false, //是否可通过按下ESC键关闭MessageBox
            //         closeOnHashChange: false //是否在hashchange时关闭MessageBox
            //     }).then(() => {
            //         window.localStorage.clear()
            //         window.location.href = '/'
            //     }).catch(() => {

            //     })
            // }
        }
        return data;
    }
    return Promise.reject(data);
}, (err) => {
    return Promise.reject(err)
});

export default fetch;

2接口文件 home.js

1
2
3
4
5
6
7
8
9
10
11
import fetch from '@/utils/fetch'

// 获取展示厂内所有项目的TRI状态列表 Project Timing (未完成)
export const projectTiming = (params) => {
    return fetch({
        url: '/timing/getTimingList',
        method: 'get',
        params
    })
}

3引用接口

1
import { projectTiming } from '@/apis/home'
axios
#axios
axios插件
http://www.dwyblog.cn/2021/09/03/axios插件/
作者
幸福来敲门
发布于
2021年9月3日
许可协议