axios 使用javascript 类封装
创建request.js
创建axios实例,配置响应成功,失败,拦截器。在main.js中调用。使用axios。后面在service就可以直接调用。
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
base.service.js 文件
这个文件主要用来配置所有请求基本方法,post
,get
,patch
,delete
,put
。
还可以应用一定的工具类对数据进行为空的一个处理。
import axios from 'axios';
import { objCleanEmpty, objValueTrim } from '@/utils';
export default class BaseService {
// 提供get请求方法
static async get(url, params = {}, clearEmptyParams = true) {
params = clearEmptyParams ? objCleanEmpty(objValueTrim(params)) : params;
return axios.request({
method: 'GET',
url,
params,
});
}
// 提供post请求
static async post(url, postData, clearEmptyData = true) {
postData = clearEmptyData ? objCleanEmpty(objValueTrim(postData)) : objValueTrim(postData);
return axios.post(url, postData);
}
// 提供patch请求
static async patch(url, postData = {}, clearEmptyData = true) {
postData = clearEmptyData ? objCleanEmpty(objValueTrim(postData)) : objValueTrim(postData);
return axios.patch(url, objValueTrim(postData ?? {}));
}
// 提供put方法
static async put(url, postData = {}, clearEmptyData = true) {
postData = clearEmptyData ? objCleanEmpty(objValueTrim(postData)) : objValueTrim(postData);
return axios.put(url, postData);
}
// 提供delete请求
static async delete(url, postData = []) {
return axios.delete(`${url}`, { body: postData });
}
}
具体实际请求模块文件
login.service.js
为例子:
import BaseService from './../base.service';
export class LoginService extends BaseService {
static async loginApi(postData) {
return BaseService.post('/admin/login', postData);
}
}
具体实际调用:
这里就能体现使用类对象来封装的好处了,可以直接引入一个类即可,调用类具体的方法。
import { LoginService } from '@/services';//引入服务模块
//使用
LoginService.loginApi({
username,
password,
})
.then((data) => {
//响应数据对应的操作
})
.catch((err) => {
// 请求失败对应的操作
});