vue封装axios

1、安装

npm install axios
npm i qs

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

2、在 utils 文件夹下新建 axios.js
第一种： 在 axios.js 里面配置本地、开发、生产环境 的 地址（baseURL ）

import axios from "axios"; // 引入 axios 模块，用于请求数据
import Qs from "qs"; // 在对axios进行封装前，引入 qs 包，用于序列化表单，不然后台接收不了数据（post请求默认Content-type是 application/json，而后台需要接收的数据格式为application/x-www-form-urlencoded）
import storage from "@/utils/cookie";
// axios.defaults.withCredentials = true	// 跨域时如果要带上cookie话则需要设置withCrendentials
// axios.defaults.crossDomain = true; //false  不跨域  true 跨域

export default function(path, params, method = "GET", headerType = "json") {
  let baseURL = "",
    headers = {},
    data = {};

  if (process.env.NODE_ENV == "development") {
    baseURL = "/apis";
  } else if (process.env.NODE_ENV == "production") {
    baseURL = "http://airjob.333job.com:86/"; //正式
  } else if (process.env.NODE_ENV == "testing") {
    baseURL = "http://192.168.101.106:8200/"; //测试
  }

  axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
  axios.defaults.headers["Cache-Control"] = "no-cache";
  axios.defaults.timeout = 10000; //设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

  //post请求
  if (method === "post") {
    if (headerType === "json") {
      //参数是json类型
      axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
      data = params;
    }
    // else if(headerType == "form-data"){
    //     axios.defaults.headers["Content-Type"] = 'multipart/form-data;charset=UTF-8'
    //     data = params;
    // }
    // else if (headerType == "stream") {
    //   axios.defaults.headers["Content-Type"] = "application/octet-stream";
    //   data = params;
    // }
    else {
      axios.defaults.headers["Content-Type"] =
        "application/x-www-form-urlencoded;charset=UTF-8";
      data = Qs.stringify(params);
    }
  }

  //get请求
  if (method === "get") {
    if (headerType == !"json") {
      axios.defaults.headers["Content-Type"] =
        "application/x-www-form-urlencoded;charset=UTF-8";
    }
    data = Qs.stringify(params);
    path = path + "?" + data;
    data = {};
  }

  if (method === "put") {
    if (headerType == "json") {
      axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
      data = params;
    } else {
      axios.defaults.headers["Content-Type"] =
        "application/x-www-form-urlencoded;charset=UTF-8";
      data = Qs.stringify(params);
    }
  }

  // 添加请求拦截器
  axios.interceptors.request.use(
    config => {
      // 在发送请求之前做些什么
      // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
      let token = storage.getCookie("token");
      if (token) {
        config.headers["Token"] = token;
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

//   添加响应拦截器 
  // 方法一：  当出现某些情况的时候设置请求拦截
  axios.interceptors.response.use(
    response => {
      if (response.data.code == 401) {
        this.$storage.removeStorage("token"); // 清除token
        router.replace({
          path: "/",
          query: {
            redirect: router.currentRoute.fullPath
          }
        });
      }
      return response;
    },
    error => {
      return Promise.reject(error);
    }
  );

  // 方法二： 添加响应拦截器
  //   axios.interceptors.response.use(
  //     response => {
  //       return response;
  //     },
  //     error => {
  //       if (error.response.status) {
  //         switch (error.response.status) {
  //       // 对响应数据做点什么
  //       // 这里可以跟后台开发人员协商好统一的错误状态码
  //       // 根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  //       // 下面列举几个常见的操作，其他需求可自行扩展
  //           // 401: 未登录, 则跳转登录页面，并携带当前页面的路径
  //           // 在登录成功后返回当前页面，这一步需要在登录页操作。
  //           case 401:
  //             router.replace({
  //               path: "/login",
  //               query: { redirect: router.currentRoute.fullPath }
  //             });
  //             break;
  //           // 403 token过期, 登录过期对用户进行提示, 清除本地token, 跳转登录页面
  //           case 403:
  //             this.$message.error("登录过期，请重新登录"); //这里使用element的消息提示
  //             this.$storage.removeStorage("token"); // 清除token
  //             // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
  //             setTimeout(() => {
  //               router.replace({
  //                 path: "/login",
  //                 query: {
  //                   redirect: router.currentRoute.fullPath
  //                 }
  //               });
  //             }, 1000);
  //             break;
  //           // 404请求不存在
  //           case 404:
  //             this.$message.error("网络请求不存在");
  //             break;
  //           // 其他错误，直接抛出错误提示
  //           default:
  //             this.$message.error(error.response.data.message);
  //         }
  //       }
  //       return Promise.reject(error.response);
  //     }
  //   );

  //发送请求
  return new Promise((resolve, reject) => {
    axios({
      baseURL,
      method,
      url: path,
      data,
      headers,
      timeout: 10000  
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

第二种： 不在 在 axios.js 里直接配置本地、开发、生产环境 的 地址（baseURL ），而是通过
baseURL = process.env.BASE_URL 来设置，但需在对应的 dev.env.js / prod.env.js / test.env.js 去配置 BASE_URL
（1）

import axios from 'axios';
import Qs from 'qs'
import storage from './cookie'

export default function (path, params, method = "GET", headerType = "json") {
    let baseURL = process.env.BASE_URL, headers = {}, data = {}     // 此处设置 baseURL = process.env.BASE_URL，故需在对应的  dev.env.js  prod.env.js   test.env.js  去配置 BASE_URL
 
    axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
    axios.defaults.headers['Cache-Control'] = 'no-cache'
    //post请求
    if (method === 'post') {
        if (headerType === "json") {
            axios.defaults.headers["Content-Type"] = 'application/json;charset=UTF-8'
            data = params
        }
        else if (headerType == "form-data") {
            axios.defaults.headers["Content-Type"] = 'multipart/form-data;charset=UTF-8'
            data = params;
        }
        else {
            axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8'
            data = Qs.stringify(params);
        }
    }
    //get请求
    if (method === 'get') {
        if (headerType == !'json') {
            axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8'
        }
        data = Qs.stringify(params);
        path = path + '?' + data
        data = {};
    }
    //    请求拦截
    axios.interceptors.request.use(config => {
        let token = storage.getCookie('token');
        if (token) {
            config.headers['Token'] = token;
        }
        return config;
    }, error => {
        return Promise.reject(error)
    })
    //开始请求
    return new Promise((resolve, reject) => {
        axios({
            baseURL,
            method,
            url: path,
            data,
            headers,
            timeout: 5000,
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}

（2）在 config — > dev.env.js 里

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"/apis"'
})

（2）在 config — > prod.env.js 里

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

（3）在 config — > test.env.js 里

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  BASE_URL: '"http://xxx/xxx/xxx"',   //  测试环境地址
})

3、使用：在 apis文件夹下的 apis.js 中引入我们封装的 axios

import https from "@/utils/axios";

//登录
export const Login = function (params) {
  let url = "/net/webLogin";
  return https(url, params, "post");
};