在网上搜了好多关于 axios 的封装,发现他们均无法使用,通用型不太好。
## 第一步 安装 axios
## 第二步 创建 HttpService.js
在 src > api 目录下 创建 HttpService.js,具体内容见下
import axios from 'axios'import router from '../router/router'axios.defaults.timeout = 5000// 配置默认 urlaxios.defaults.baseURL = 'https://www.easy-mock.com/mock/5bd05256e11dd958b534cf2a'axios.defaults.withCredentials = true// http request 拦截器axios.interceptors.request.use( config => { config.data = JSON.stringify(config.data) config.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } return config }, error => { return Promise.reject(error) })// http response 拦截器axios.interceptors.response.use( response => { if (response.data.code === '404') { router.push({ path: '/login', querry: { redirect: router.currentRoute.fullPath } // 从哪个页面跳转 }) } return Promise.resolve(response) }, error => { return Promise.reject(error) })/**** 封装 HTTP 请求* @param url* @param data* @return {Promise}*/function apiAxios (method, url, params) { return new Promise((resolve, reject) => { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null }).then(function (res) { resolve(res) }).then(function (err) { reject(err) }) })}export default { get: function (url, params) { return apiAxios('GET', url, params) }, post: function (url, params) { return apiAxios('POST', url, params) }, put: function (url, params) { return apiAxios('PUT', url, params) }, delete: function (url, params) { return apiAxios('DELETE', url, params) }}复制代码
## 第三步 在main.js,引入 HttpService.js
import Api from './lib/HttpService'// 定义全局变量,封装 http 请求Vue.prototype.$api = Api复制代码
## 第四步, 在任意组件中使用
methods: {getPublicDocumentList () { var _thi = this; this.$api.get('/api/v1/file/list',{page: 1,size: 200}).then( (response) => { console.log(response.data); }) }}created: function () { // 页面加载后,调用(详见vue生命周期钩子) this.getPublicDocumentList()},复制代码
错误之处,欢迎指正。