vue-axios整合使用

惯例先安装axios，不多说！

cnpm install axios

1.axios配置
我的目录结构src/axios/index.js，axios配置都在该文件下

src/axios/index.js 如下：

import axios from 'axios'

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://localhost:8008';

拦截器，axios.interceptors.request.use发送请求前处理
axios.interceptors.response.use接受返回后，回调之前处理处理

axios.interceptors.request.use((config) => {
 if (config.method === 'get') {
    // config.data = qs.stringify(config.data);
    config.data = JSON.stringify(config.data);
  }
  return config;
},(error) =>{
  return Promise.reject(error);
});

//返回状态判断
axios.interceptors.response.use((res) =>{
  if(!res.data.success){	//这里根据接口返回的实际情况来写
  	//这里是接口异常，可以统一弹窗提示错误信息
  	//ElementUI.Message.error(res.data.message);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  //404等问题可以在这里处理
  return Promise.reject(error);
});

公共方法：

// POST
export function post(api, params) {
  return new Promise((resolve, reject) => {
    params = JSON.stringify(params);  
    axios.post(api, params)
      .then((response) => {
        resolve(response.data);
      }, (err) => {
        reject(err.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

//GET
export function get(api, data) {
  return new Promise((resolve, reject) => {    
    axios.get(api, { params: data })
      .then((response) => {
        resolve(response.data);
      }, (err) => {
        reject(err);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

如果不理解可以将以上代码依次copy到src/axios/index.js文件，当然axios.defaults.baseURL = 'http://localhost:8008'; 需要换成自己的api。
——2019年11月17日更新

更多VUE相关问题，请关注公众号：【VUE全家桶】，2019年面试题系列正在更新，100期！不见不散