axios在vue中的配置和使用

axios在vue中的配置

配置

import axios from 'axios';
// import Vue from 'vue';
import Cookies from 'js-cookie';
import utils from './utils';

const baseURL = process.env.baseUrl;

const http = axios.create({
  baseURL, // api的base_url
  timeout: 60000, // 请求超时时间
});
// request拦截器
http.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  const token = Cookies.get('token');
  if (token) {
    // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
  }
  // 上传文件的时候，需要添加header
  if (config.url.indexOf('fileUpload') > 0) {
    if (config.method === 'post') {
    //   config.headers['Content-Type'] = 'multipart/form-data';
    //   config.headers['X-Requested-With'] = 'XMLHttpRequest';
    }
  }
  return config;
}, (error) => {
  // Do something with request error
  // console.log(error);
  Promise.reject(error);
});
// respone拦截器
http.interceptors.response.use(
  (response) => {
    if (response.data.code === 2001) {
      // alert('登录信息失效，请重新登录');
      utils.logout();
      return Promise.reject(response);
    }

    if (response.data.code !== 1) {
      // alert(response.data.msg);
      return Promise.reject(response);
    }
    return response;
  },
  error => Promise.reject(error)

  ,
);

export default http;

使用(分模块)

api.js

import http from '配置文件'
export function xxx(){
	return http({
		url: '',
		method:''
		data:''
	})
}

demo.vue

import { xxx} from 'api.js'
clickFunc(){
	this.getApi()
}
async getApi(){
	try{
		let result = await xxx()
   }catche(e){
       console.log(e)
	}
}