Vue中使用axios封装post/get请求，支持链式

在common文件夹中新建axios.js

// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import { Notify } from 'vant';
axios.defaults.timeout = 5000;

 //填写域名
axios.defaults.baseURL =urlObj[sceneParam];

//http request 拦截器  客户端给服务端的数据 
axios.interceptors.request.use(
  config => {   
    config.headers.common = {
      'Authorization': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }
    if (config.data && config.data.isFormData) {
        config.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
        //转化成formData格式
        // transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
        config.transformRequest=[function (data) {
            delete data.isFormData;
            var res = Qs.stringify(data);
            return res;
          }]
        }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//响应拦截器即异常处理 -  -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
  if (response.status === 200) {
      return Promise.resolve(response);
  } else {
      return Promise.reject(response);
  }
  // return response
}, err => {
  if (err && err.response) {
    var errorMsg = '';
    switch (err.response.status) {
      case 400:
          console.log('错误请求')
          errorMsg = '错误请求';
        break;
      case 401:
          console.log('未授权，请重新登录');
          errorMsg = '未授权，请重新登录';
        break;
      case 403:
        console.log('拒绝访问')
        errorMsg = '拒绝访问';
        break;
      case 404:
        console.log('请求错误,未找到该资源')
        errorMsg = '请求错误,未找到该资源';
        break;
      case 405:
        console.log('请求方法未允许')
        errorMsg = '请求方法未允许';
        break;
      case 408:
        console.log('请求超时')
        errorMsg = '请求超时';
        break;
      case 500:
        console.log('服务器端出错')
        errorMsg = '服务器端出错';
        break;
      case 501:
        console.log('网络未实现')
        errorMsg = '请求方法未允许';
        break;
      case 502:
        console.log('网络错误')
        errorMsg = '网络错误';
        break;
      case 503:
        console.log('服务不可用')
        errorMsg = '服务不可用';
        break;
      case 504:
        console.log('网络超时')
        errorMsg = '网络超时';
        break;
      case 505:
        console.log('http版本不支持该请求')
        errorMsg = 'http版本不支持该请求';
        break;
      default:
        console.log(`连接错误${err.response.status}`)
    }
  } else {
    console.log('连接到服务器失败')
    errorMsg = '连接到服务器失败';
  }
  return Promise.resolve(err.response)
})

export default {
	//post请求
	  post(url,params){ 
	    return axios.post(url,params)
	      .then((response)=>{
	          if(response && response.status==200){
	            return Promise.resolve(response.data.data); 
	          }
	      })
	    },
	    //异步get请求
		async get(url,params={}){
		        var res = await axios({
		            method: 'get',
		            url:url,
		            params: params
		        });
		    return res.data.data;
		}
}

页面使用方法

可以挂载在原型链上，使用this.$axios访问。

import axios from '../common.axios.js'

axios.get(this.$api.web,{
	userid:'',
	token:''
}).then((data)=>{
					console.log(data)
				});

若有疑问，欢迎留言，谢谢支持！