axios二次封装

import axios from 'axios'

import { Toast } from 'vant'

import store from '../store'

 

// 区分开发环境(development)下的测试接口与生产环境(production)下的真实(线上)接口基准路径

const baseURL = process.env.NODE_ENV === 'development'

? 'http://xxx.site:3000'

: 'http://www.xxx.com'

 

// 创建 axios 实例

const service = axios.create({

baseURL, // 基准路径

timeout: 10000, // 超时时间

})

 

// 请求拦截

service.interceptors.request.use(config => {

/* 在发送请求之前做些什么 */

// 在发送请求前，进行加载提示

Toast.loading({

message: '加载中...',

duration: 0,

})

// 在请求头中添加 token 的传递

const token = store.getters['user/token']

if (token) {

config.headers.Authorization = 'Bearer ' + token

}

 

// 返回配置对象

return config

}, err => {

Toast.clear()

return Promise.reject(err)

})

 

// 响应拦截

service.interceptors.response.use(response => {

/* 对响应数据做点什么 */

// 响应返回，则关闭加载提示

Toast.clear()

// 处理服务端返回的响应数据

if (response.status >= 200 && response.status < 300) {

// 通过 response.data 获取到服务端返回的响应数据

// 当前项目访问的后端与前端接口规范为: 返回对象，有 {code, data, msg} 属性，当 code 为 200 时，

// data 中保存的是正确获取到的数据，如果 code 不为 200，则说明有错误，在 msg 中提示的错误信息

const { code, data, msg } = response.data

if (code === 200) {

// 成功，则返回需要获取使用的数据

return data

}

 

// 如果失败，则将 Promise 标记为 rejected 失败状态

const error = new Error(msg)

return Promise.reject(error)

}

 

// 如果响应状态码不为 2xx，则说明有异常

const err = new Error('接口访问异常')

return Promise.reject(err)

}, err => {

/* 对响应错误做点什么，比如网络问题导致错误，会在这儿处理 */

Toast.clear()

return Promise.reject(err)

})

 

// 导出模块

export default service