安装 Axios 和 qs
npm install axios qs --save
在 Vue 项目中创建一个 api 文件夹,用来存放所有的接口请求方法。
在 api 文件夹中新建一个 request.js 文件,用来封装 Axios 请求。
import axios from 'axios'
import qs from 'qs'
/**
* axios 请求过滤器
*/
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
}, error => {
return Promise.reject(error)
})
/**
* axios 响应过滤器
*/
axios.interceptors.response.use(response => {
if (response.data.code === 401) {
localStorage.removeItem('token')
window.location.reload()
}
return response.data
}, error => {
return Promise.reject(error.response.data)
})
/**
* axios 封装请求
*/
export default {
get(url, params = {}) {
return axios.get(url, {
params: params
})
},
post(url, params = {}) {
return axios.post(url, qs.stringify(params))
},
put(url, params = {}) {
return axios.put(url, qs.stringify(params))
},
delete(url, params = {}) {
return axios.delete(url, {
params: params
})
}
}
在上面的代码中,我们使用 axios.interceptors 来注册请求过滤器和响应过滤器。在响应过滤器中,如果返回的状态码为 401,则移除本地存储中的 token,然后刷新页面,再次跳转到登录页。这是一种常见的处理方式,防止用户长时间未活动导致 token 失效后继续使用应用程序。
在请求的方法中,我们封装了四种请求方式:get、post、put、delete,分别对应 HTTP 的四种请求方式。其中,get 请求默认将参数拼接在 url 中,而 post、put 请求将参数进行序列化,然后发送给服务器。
在具体的业务逻辑代码中,调用封装的请求方法。
import request from 'api/request.js'
// get 请求
request.get('/user/list', {currentPage: 1, pageSize: 10}).then(data => {
console.log(data)
})
// post 请求
request.post('/user/create', {name: 'Tom', age: 20}).then(data => {
console.log(data)
})
// put 请求
request.put('/user/update/1', {name: 'Jerry', age: 22}).then(data => {
console.log(data)
})
// delete 请求
request.delete('/user/delete/1').then(data => {
console.log(data)
})