一、axios安装
安装方法:cd到项目目录下命令行输入:
npm install axios
axios不能直接使用Vue.use(axios)方法 ,因此需要导入专门的一个包来整合使用axios:
npm install --save axios vue-axios
main.js中引入:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
注意:Vue.use(VueAxios, axios)中顺序不能换,否则会报错:Cannot read property ‘protocol’ of undefined
在页面js处引入:
import axios from 'axios'
二、使用
1. 封装api
在项目中我需要配置一些axios请求拦截器和响应拦截器,并且也需要将api进行统一管理,这里小小总结一下我的方法。目录结构如下:
-src
----api
--------index.js
----axios
--------axios.js
先看index.js用于统一管理api接口,post方法和get方法举例,这里的reqData类型是对象:
import Ax from '../axios/axios'
import qs from 'qs'
/* 登陆 */
export function login(reqData) { return Ax.post('/api/login', qs.stringify(reqData)) }
/* 用户列表 */
export function getUserList(reqData) { return Ax.get('/api/users', { params: reqData }) }
2. 使用
登录页面中
import { login } from '../service/api/index'
const params = { username: this.loginForm.name, password: this.loginForm.password }
login(params).then(res => {
if (res.data.result_code === 'FAIL') {
this.$alert('账号密码错误', {
confirmButtonText: '确定'
})
return false
} else {
localStorage.setItem('token', 'Bearer ' + res.data.data.token)
this.$router.push('/home')
}
})
请求用户信息中:
import { getUserList } from '@/service/api/index'
const params = { 'page': this.page, 'limit': this.limit }
if (this.form.telephone !== '') {
params.telephone = this.form.telephone
}
getUserList(params).then(res => {
this.tableData = res.data.data.data
this.total = res.data.data.total
this.loading = false
})
3. axios配置
import axios from 'axios'
import router from '../../router'
axios.defaults.baseURL = '路径'
axios.defaults.withCredentials = false
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
/* 请求拦截 */
axios.interceptors.request.use(
config => {
if (localStorage.getItem('token')) {
config.headers.Authorization = localStorage.getItem('token')
}
return config
},
err => {
return Promise.reject(err)// 请求错误时,直接结束
})
/* 响应拦截 */
axios.interceptors.response.use(
response => {
return response
},
err => {
if (err.response) {
switch (err.response.status) {
case 401:
localStorage.removeItem('token')
router.replace('/login')
break
}
}
// return Promise.reject(err.response.data) // 请求错误时,直接结束
})
export default axios
封装后需要改变main.js中axios的引入:
import axios from './service/axios/axios'
如果想要直接使用axios,可以看axios文档
三、用到post请求时,需要安装qs
在项目中使用命令行工具输入:
扫描二维码关注公众号,回复:
9724587 查看本文章
npm install qs
安装完成后在需要用到的组件中:
import qs from 'qs’
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客,可太感谢啦。