vue 中配置 axios

首先还是安装插件：

1	npm i axios

在 main.js 中引用 axios

1
2
3

import axios from 'axios';

Vue.porototype.$ajax = axios;

直接使用时，post 方法无法将参数传往后台，因为默认axios默认使用：Request Payload 传参，而不是我们常用的

1	'application/x-www-form-urlencoded'

解决问题方法很多，一种是用新接口 URLSearchParams ，但兼容性差不推荐。

1
2
3

var params = new URLSearchParams();
params.append("admin_name", self.form.admin_name)
params.append("admin_passwd", self.form.admin_passwd)

另一种用 axios 自家的 qs 模块，不用特意安装，安装 axios 默认依赖了qs 用时直接引入

import qs from 'qs';
然后设置 post 默认传输格式是表单
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.post('/foo', qs.stringify({ 'bar': 123 }));

在 vue 中每次使用都引入一大堆显然很蠢，可以自己封装函数，然后使用封装后函数，或者，我采用进行 axios 的基础配置：


import axios from 'axios';
import qs from "qs"; // 参数处理模块
import { Loading } from 'element-ui';

// 基础域名，方便上线时更换
axios.defaults.baseURL = 'http://localhost:3000';
// post 内容类型为 表单，方便后台取用，也可根据需求改为 json
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 数据传输前钩子，可以修改数据类型，比如我们这里修改 post 时的 参数格式为表单。
// axios.defaults.transformRequest = [function (data) {
//   return qs.stringify(data);
// }]
// 拦截器，上传前修改请求头，
axios.interceptors.request.use(
  config => {
    // 使用 elementUI 在上传前播放 loading 动画
    Loading.service({
      fullscreen: true,
      text: '拼命加载中...',
    });
    // 修改post 参数格式为表单 同时判断了文件格式，不影响json格式参数的传输。
    if (config.data != null) config.data = qs.stringify(config.data);
    return config;
  },
  err => {
    let loading = Loading.service({});
    loading.close();
    return Promise.reject(err);
  });
// http response 拦截器 
axios.interceptors.response.use(
  response => {
    let loading = Loading.service({});
    loading.close();
    return response;
  },
  error => {
    let loading = Loading.service({});
    loading.close();
    return error;
  });
// 可以将 axios 挂到 vue 上。
// Vue.prototype.$ajax = axios
// 也可以像我这样当作工具函数 export 出去
export default axios;

因为是使用了 elementUI 的 loading 插件，在每次经行与后台的数据交互的时候就显示 loading 图；

目的是提高用户体验，但这里使用了一个全屏的 loading 实际页面像是刷新了一样，体验不佳，大体功能做完后修改；

其实也可以封装为函数，用到的 get post 方法单独封装，后期用到哪个接口就引入那个，更符合模块化思维，但我们这里因为是pc端，所以请让我偷个懒。