Mrli
别装作很努力,
因为结局不会陪你演戏。
Contacts:
QQ博客园

Vue中使用axios

2021/12/08 前端 Vue
Word count: 1,366 | Reading time: 7min

axios请求

官网网址

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

直接每次从axios库中调用axios函数

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
<template>
<div>
<div>mmmm</div>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: "post",
created() {
/*
post常用的请求数据(data)格式有两种:
1)applicition/json
2)form-data 表单提交(图片上传,文件上传)
*/
//第一种写法叫做post别名请求方法
// http://localhost:8080/static/data.json?id=1
// applicition/json 请求
let data = {
id: 1
}
axios.post('../../static/data.json', data)
.then((res) => {
console.log('数据:', res);
})
//第二种写法
axios({
method: 'post',
url: '../../static/data.json',
data: data,
}).then((res) => {
console.log('数据:', res)
})
// form-data 请求
let formData = new FormData()
for (let key in data) {
formData.append(key, data[key])
}
axios.post('../../static/data.json', formData)
.then((res) => {
console.log('数据:', res);
})
}
}
</script>

<style scoped>
</style>

结合 vue使用vue-axios

npm install --save axios vue-axios
vue-axios是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

1
2
3
4
5
6
// 首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

之后就可以使用了,在组件文件中的methods里去使用了

1
2
3
4
5
6
7
8
9
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})


},

axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上

1
2
import axios from 'axios'
Vue.prototype.$axios= axios

在组件中使用

1
2
3
4
5
this.$axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})

创建axios实例,并封装成工具类

1
2
3
4
5
6
7
8
9
10
// utils/requests.js
import axios from 'axios'

// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})

export default service

组件中直接import

1
2
3
4
5
6
7
8
9
<script>
import maxios import "./utils/requests.js"
maxios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})

</script>

注: 封装的request指定了baseURL,针对的是没有协议头的相对URL,比如/api;如果使用时加上了http协议头,则还是会走具体的链接,如http://127.0.0.1:5000/api/getword&date=2020-04-01

axios进阶用法: 结合vuex再封装一层

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
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
response => response,
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})

export default service

demo示例

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
/**
* 严肃声明:
* 开源版本请务必保留此注释头信息,若删除我方将保留所有法律责任追究!
* 本系统已申请软件著作权,受国家版权局知识产权以及国家计算机软件著作权保护!
* 可正常分享和学习源码,不得用于违法犯罪活动,违者必究!
* Copyright (c) 2020 陈尼克 all rights reserved.
* 版权所有,侵权必究!
*/
import axios from 'axios'
import { Toast } from 'vant'
import router from '../router'

axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '//backend-api-01.newbee.ltd/api/v1' : '//backend-api-01.newbee.ltd/api/v1'
axios.defaults.withCredentials = true
// 允许携带cookie
axios.defaults.withCredentials = true
// 请求头信息
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 默认使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.request.use(
config => {
return config;
},
error => {
console.log(error);
return Promise.reject();
}
);

axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
Toast.fail('服务端异常!')
return Promise.reject(res)
}
if (res.data.resultCode != 200) {
if (res.data.message) Toast.fail(res.data.message)
if (res.data.resultCode == 416) {
router.push({ path: '/login' })
}
return Promise.reject(res.data)
}

return res.data
})

export default axios

针对后端API请求封装成Service的项目示例

Author: Mrli

Link: https://nymrli.top/2021/11/30/Vue中使用axios/

Copyright: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

< PreviousPost
Vue-Router细节记录
NextPost >
Vue3初体验
CATALOG
  1. 1. axios请求
    1. 1.1. 直接每次从axios库中调用axios函数
    2. 1.2. 结合 vue使用vue-axios
    3. 1.3. axios 改写为 Vue 的原型属性
    4. 1.4. 创建axios实例,并封装成工具类
    5. 1.5. axios进阶用法: 结合vuex再封装一层
  2. 2. demo示例
  3. 3. 针对后端API请求封装成Service的项目示例