vue简单的Axios封装

vue简单的Axios封装

1.引入文件

import axios from "axios";
import router from "@/router/router";
import qs from "qs";

2.axios 全局默认设置

axios.defaults.baseURL = "http://xxx.com"    //全局默认请求地址
// 全局设置post请求的数据编码格式
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded"; 
//第三方认证涉及到token 如果没有可以干掉
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3.axios 实例对象

let http = axios.create({
    timeout:10000;   //设置超时时间，单位毫秒
    headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
   // `transformRequest` 允许在向服务器发送前，修改请求数据
   // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  transformRequest: [
    function (data, headers) {
      if (headers["Content-Type"] === "application/x-www-form-urlencoded") {
        return qs.stringify(data);
      } else if (
        headers["Content-Type"] === "multipart/form-data;charset=UTF-8"
      ) {
        return data;
      }
    }
  ]
})

4.http request 拦截器

//设置拦截器 可以在正式请求发出之前做些事情
http.interceptors.request.use(
  config => {
    if (localStorage.token) {
      config.headers.token = JSON.parse(localStorage.token);
    } else {
      router.replace("/");
    }
    return config;
  },
  error => Promise.error(error)
);

5.新建文件 封装请求

import http from "@/http"; //引入刚才封装的axios

//put
function put(url, data) {
  return http.put(url, {
    json: JSON.stringify(data),
  });
}
//get
function get(url, data) {
  if (IsURL(url)) {
    http.url = url;
  }
  return http.get(url, {
    params: data,
  });
}
//post
function post(url, data) {
  return http.post(url, {
    json: JSON.stringify(data),
  });
}
//delete
function del(url, data, header) {
  return http.delete(url, {
    headers: header,
    params: data,
  });
}

//url是否为链接
function IsURL(str_url) {
  var strRegex = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  var re = new RegExp(strRegex);
  if (re.test(str_url)) {
    return true;
  } else {
    return false;
  }
}

export {
  put,
  get,
  post,
  del
};