How does Vue encapsulate axios
今天小编给大家分享一下Vue怎么封装axios的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
安装axios
起手安装axios
npm install axios
request.js
该文件中对axios进行封装
import axios from 'axios'
const baseURL = 'http://localhost:4000/api'
// 创建 axios 实例
const service = axios.create（{
baseURL: baseURL, // 请求地址前缀，将自动加在 url 前面
timeout: 6000 // 请求超时时间
}）
// axios请求拦截器
service.interceptors.request.use（config => {
if （localStorage.getItem（'loginToken'）） {
// 请求统一设置header
config.headers.Authorization = localStorage.getItem（'loginToken'）
}
return config
}, error => {
return Promise.reject（error）
}）
// axios响应拦截器
service.interceptors.response.use（response => {
return response.data
}, error => {
// console.log（'看一看', error.response）
const { status } = error.response
if （status === 401） { // token失效
Message.error（'token失效，请重新登录'）
// 清除token
localStorage.removeItem（'loginToken'）
router.push（'/'）
}
return Promise.reject（error）
}）
export { service as axios }
在axios.create操作中还可以进行其他的一些操作，诸如：
根据当前环境切换不同的url（生产环境/开发环境/测试环境）
baseURL: process.env.NODE_ENV === 'production' ? 'productApi': 'developApi'
1
统一请求头配置
headers: {
get: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
},
post: {
'Content-Type': 'application/json;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
}
},
跨域、响应码处理
提供是否允许跨域的属性--withCredentials: true/false
请求响应序列化
// 在向服务器发送请求前，序列化请求数据
transformRequest: [function （data） {
data = JSON.stringify（data）
return data
}],
// 在传递给 then/catch 前，修改响应数据
transformResponse: [function （data） {
if （typeof data === 'string' && data.startsWith（'{'）） {
data = JSON.parse（data）
}
return data
}]
同样，拦截器中也可以自定义更多的内容
api.js
import { axios } from './request'
const api = {
user: '/user/getUsers'
}
export default api
export function getUsersApi（param） {
return axios（{
url: api.user,
method: 'post',
data: param
}）
}
以上就是"Vue怎么封装axios"这篇文章的所有内容，感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。
