自己封装的模块化 axios 请求，详细
新增 http.js 文件用于封装 axios
Import axios from ‘axios’
Import qs from ‘qs’
// 根据以下定义的基础地址 方便项目调试
switch (process.env.NODE_ENV) {
case "production":
axios.defaults.baseURL = 'http://127.0.0.1:8090'
break;
case "test":
axios.defaults.baseURL = 'http://127.0.0.2:8080'
break;
default:
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com/'// 默认运行地址
}
//超时时间
axios.defaults.timeout = 10000;
//跨域是否允许携带凭证
axios.defaults.withCredentials = true;
设置请求传递数据的格式(主要看服务器要求什么格式，我们处理后给服务器)
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
//告知服务器请求主体的数据格式xxx=xxx&xxx=xxx 只对 post请求有作用
//transformRequest 用于改变post请求
axios.defaults.transformRequest = data => qs.stringify(data)
/*
请求拦截器 比如你妈妈给你100块钱嘱咐你到我这买东西 你可以买也可以不买 也可以只买不到100块钱的东西 想干什么 就干什么 为所欲为 一般我用的比较少
网络请求都会先走这个方法 在里面能为请求头加一些自定义的内容发送给服务器 比如：Token校验啥的
*/
axios.interceptors.request.use(config => {
let token = localStorage.getItem('token') // 比如获取本地的token 然后 把 token 给请求头
token && (config.headers.Authorization = token)
return config
}, error => {
return Promise.reject(error)
})
/*
响应拦截器 服务器收到请求了 比如 你给我100 块钱了 我给你找零给你东西，但是我也可以不给你东西 还把你打一顿
*/
还有很多返回值 去axios 文档上看
axios.interceptors.response.use(res => {
return res.data
}, error => {
let { res } = error
if (res) {
//如果服务器返回的有结果 根据公司需求来写
switch (res.status) {
case 401://当前请求需要用户验证(一般是没有登录) 做一些提示
console.log('需要验证 msg 提示窗口什么的 跳转登录页什么的');
break;
case 403://服务器收到请求,但是拒绝执行(一般是令牌过期)
console.log('清除令牌什么的');
break;
case 404: // 你可以写个页面啥的专门用来提示 404
break;
}
} else {
//服务器返回的没有结果 1:服务器炸了 2:本地没有网络,这里做一下断网处理
if (!window.navigator.onLine) {
// 断网处理: 你可以像404那样新只能一个页面 然后你懂的.....
return
}
//如果断网也没有 就是服务器的问题了 返回服务器报错信息
return Promise.reject(error)
}
})
//配置好后 把封装好的axios暴露出去 供外部使用
export default axios;
Package.json文件
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "set NODE_ENV=test&&vue-cli-service serve",
"serve:production": "set NODE_ENV=production&&vue-cli-service serve",
},
运行：
npm run serve:test
npm run serve:production
nnpm run serve
使用：
新增放置登录接口的页面：
新增LoginApi.js
import axios from './http'
function login(params) {
return axios.get('login', params)
}
export default {
login
}
新增放置所有API的页面：
//定义所有数据请求
import LoginApi from './LoginApi’
export default {
LoginApi
}
将定义所有数据请求的JS文件挂载到vue全局对象上
import api from './utils/api'
vue.prototype.$api = api
页面中使用
this.$api.LoginApi.login(参数).then(res=>{})
网友评论