vue 封装 axios HTTP通用请求

在网上搜了好多关于 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()},复制代码

错误之处，欢迎指正。

详见源码