基于Axios 的封装
配置Axios
在项目目录下的untils(工具文件夹)新建Request.js,这里主要存放 axios 的配置及拦截器,最后导出一个axios对象
在此之前我们需要提前将一些工具安装好,下面我使用了axios lodash
// 安装依赖
npm install axios lodash --save
配置axios
import axios from 'axios' // 引入axios
import _ from 'lodash' // 我们需要lodash中的一些方法对axios传入的参数进行一些处理 文档:https://www.lodashjs.com/
import { Message } from 'element-ui' // 这里我使用了element-ui 中的message组件进行提示
// api接口的运行环境切换 (开发环境和生产环境的切换)
axios.defaults.baseURL = process.env.NODE_ENV === "development" ? "http://www.development.com":"http://www.production.com"
// 设置axios请求超时时间
axios.defaults.timeOut = 5000
// 对axios 的请求参数进行设置
axios.interceptors.request.use(
config => {
// 将axios 的请求参数中的null值和undefined值清除,并且转换成json格式的字符串
config.data = JSON.stringify(_.isObject(config.data) ? _.omitBy(_.omitBy(config.date,_.isNull),_.isUndefined): config.data
// 如果没有tokens存储 就重新登录
if(!Storage.get('tokens')){
window.location.href = '/login'
} else{
// 如果有tokens存储
// 这里需要你根据你的项目处理你的具体的业务逻辑
axios.defaults.authorization = Storage.get('tokens').tokens.access_token
}
// 给每次的http请求的header都加上token,这样后台就可以根据你的token判断你的登录情况
config.headers= {
'Content-Type': 'application/json;charset=UTF-8',
Authorization: axios.defaults.authorization
}
return config
},
error =>{
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 根据具体的项目具体分析
// 如果返回的状态码为200 则证明接口请求成功,可以正常拿到数据
// 否则的话抛出异常
if(response.status === 200){
return Promise.resolve(response)
}else{
return Promise.reject(response)
}
},
err =>{
// 在这里我们可以对异常的状态进行统一的处理
if (err && err.response) {
const errMes = err.response.data.desc;
switch (err.response.status) {
case 400:
Message.error(errMes || '错误请求');
break;
case 401:
Message.error(errMes || '用户未登录');
break;
case 403:
Message.error(errMes || '拒绝访问');
break;
case 404:
Message.error(errMes || '请求错误,未找到该资源');
break;
case 405:
Message.error(errMes || '请求方法未允许');
break;
case 406:
Message.error(errMes || '请求方法不被接受');
break;
case 408:
Message.error(errMes || '请求超时');
break;
case 500:
Message.error(errMes || '服务器端出错');
break;
case 501:
Message.error(errMes || '网络未实现');
break;
case 502:
Message.error(errMes || '网络错误');
break;
case 503:
Message.error(errMes || '服务不可用');
break;
case 504:
Message.error(errMes || '网络超时');
break;
case 505:
Message.error(errMes || 'http版本不支持该请求');
break;
default:
Message.error(errMes || `连接错误${err.response.status}`);
break;
}
return Promise.reject(err)
}
return Promise.reject(err)
}
)
封装方法
get、post、delete、put、patch请求的封装
/**
* 封装get方法
* @param {string} url - 接口地址
* @param {object} params = {} - 接口参数
* @returns {*} Promise
*/
export function get(url,params = {}){
return new Promise((resolve,reject)=>{
axios.get(url,{
params:params
}).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err)
})
})
}
/**
* 封装delete方法
* @param {string} url - 接口地址
* @param {object} params = {} - 接口参数
* @returns {*} Promise
*/
export function del (url, params = {}) {
return new Promise((resolve, reject) => {
axios.delete(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post方法
* @param {string} url -接口地址
* @param {object} data = {} - 接口参数
* @returns {*} Promise
*/
export function post (url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(res => {
resolve(res.data)
}, err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param {string} url - 接口地址
* @param {object} data = {} - 接口参数
* @returns {*} Promise
*/
export function patch (url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(res => {
resolve(res.data)
}, err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param {string} url - 接口地址
* @param {object} data = {} - 接口参数
* @returns {*} Promise
*/
export function put (url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(res => {
resolve(res.data)
}, err => {
reject(err)
})
})
}
使用
- main.js中引入文件
import * as Request from './untils/Request.js'
Vue.prototype.$http = Request
- 在组件中使用
this.$http.post(url,data).then(res=>{
console.log(res.data)
})
1. main.js中引入文件
```javascript
import * as Request from './untils/Request.js'
Vue.prototype.$http = Request
- 在组件中使用
this.$http.post(url,data).then(res=>{
console.log(res.data)
})