vue 中使用 axios

1、安装 axios、qs

npm install axios
npm install qs

axios post请求时对请求数据序列化，不然会报错

解决方法：安装 qs 对数据进行序列化

链接：https://www.npmjs.com/package/qs

2、在main.js中做如下配置 

• main.js 引入 axios、qs

import Vue from 'vue'
import Axios from 'axios'
import Qs from 'qs'

• 注册全局使用 axiaos、qs ，由于 axios、qs 并不是专门针对vue开发的请求方式，所以需将其绑定到vue的原型链拓展上

Vue.prototype.$axios = Axios
Vue.prototype.qs = Qs

• 配置全局 axios 的默认值

//基础接口地址
Axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 添加请求拦截器，数据请求前进行相关操作，如：判断是否登录

Axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

• 添加响应拦截器，数据返回后进行相关操作，如：对时间格式化，处理成想要的格式

Axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

• 到此基本的 axios 请求完成

3、调用

• 在任意组件内如下调用：

this.$axios
    .post("/list", this.qs.stringify({ city: "10001000" }))
    .then(res => {
        console.log(res);
    })
    .catch(error => {
        reject(error);
    });

 详细了解 axios 所有 api，请移步官网：https://www.kancloud.cn/yunye/axios/234845