axios 相关配置及注解

axios 介绍

axios 功能很强大，这里完成的只是鳞毛凤角

axios 是基于 promise 可用于 http 客户端和 Node.js

• 支持浏览器和 Node.js

• 支持 promise API

• 能拦截请求和响应

• 能转换请求和响应数据

• 能取消请求

• 能自动转换 JSON 数据

• 浏览器端支持放置 CSRF(跨站请求伪造)

相关配置及注解

import axios from "axios"; //引入axios插件

import Qs from "qs"; //引入qs插件
import {
  // Loading,
  Message
} from "element-ui"; //引入element-ui里的Message方法（便于提示消息）
import router from "../router/index"; //引入路由
import { removeCookie, getCookie } from "./cookie"; //引入js-cookie插件的两个方法删除cookie与读取cookie

axios.defaults.withCredentials = true; //跨域请求

// XMLHttpRequest.withCredentials
export default function(path, parmas, method = "GET", headerType = "json") {
  //配置axios,参数分别为(请求接口 ,请求参数,请求方式（默认为GET方式,可传'post'等） ,from表单提交（默认为json,可传'from'。。）)

  let baseURL = "";
  let headers = {};
  let data = {};

  if (process.env.NODE_ENV == "development") {
    //判断config文件夹下的dev.env.js文件中的NODE_ENV的值是否为development，//为development(或简写为dev)则为开发环境，为production(或简写为prod)则为生产环境
    //注：nodejs原生对象process的env属性是个对象，这个对象中就包含NODE_ENV属性
    baseURL = "/";
  }
  //  设置请求头
  if (method == "post") {
    //请求方式是post
    if (headerType == "json") {
      //是post请求方式的情况下判断是用json格式
      headers = {
        //设置请求头
        "X-Requested-With": "XMLHttpRequest", //值为XMLHttpRequest是Ajax请求，如果这里的值为null则为同步请求
        Authorization: "Bearer " + getCookie("accessToken"), //这里权限认证，传入Token
        "Content-Type": "application/json;charset=UTF-8" //设置传入参数的格式的声明，这里声明为json格式
        // 'Cache-Control': 'no-cache'
      };
      data = parmas; //data获取到要传的参数
    } else {
      headers = {
        //是post请求方式的情况下判断不是用json格式(这里判断非json则是form格式)
        "X-Requested-With": "XMLHttpRequest", //值为XMLHttpRequest是Ajax请求，如果这里的值为null则为同步请求
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" //设置传入参数的格式的声明，这里声明为form格式
        // 'Cache-Control': 'no-cache'
      };
      data = Qs.stringify(parmas); //为form格式，则需要将参数序列化，使用Qs.stringify()方法，这个方法引用自qs插件
    }
  } else {
    //请求方式为非post方式
    if (headerType !== "json") {
      //非post方式且非json格式
      headers = {
        //设置请求头
        "X-Requested-With": "XMLHttpRequest", //值为XMLHttpRequest是Ajax请求，如果这里的值为null则为同步请求
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" //设置传入参数的格式的声明，这里声明为form格式
        // 'Cache-Control': 'no-cache'
      };
      data = Qs.stringify(parmas); //因要拼接在请求路径后面，所以将参数序列化，使用Qs.stringify()方法，这个方法引用自qs插件
      path = path + "?" + data; //请求参数拼接在请求路径后面，用?隔开。
      data = {}; //清空data请求参数
    } else {
      //非post方式是json格式
      headers = {
        //设置请求头
        "X-Requested-With": "XMLHttpRequest" //值为XMLHttpRequest是Ajax请求，如果这里的值为null则为同步请求
        // 'Cache-Control': 'no-cache' //禁止缓存
      };
      data = Qs.stringify(parmas); //因要拼接在请求路径后面，所以将参数序列化，使用Qs.stringify()方法，这个方法引用自qs插件
      path = path + "?" + data; //请求参数拼接在请求路径后面，用?隔开。
      data = {}; //清空data请求参数
    }
  }
  //   请求拦截
  axios.interceptors.request.use(
    //接收两个函数作为参数，第一个在请求正常发送时做些什么，第二个是对请求错误对象做些什么
    //请求前执行
    config => {
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );
  //  响应拦截
  axios.interceptors.response.use(
    //请求后执行
    response => {
      //请求后状态码为401时，弹出错误提示"登录过期，请重新登录"(这里用的Message.error方法是之前引入的element-ui里的)，并删除储存的用户数据Token等，并控制路由将页面跳转到登录页，如果请求错误，则将错误对象转化为Promise对象
      if (response.status == "401") {
        Message.error({
          message: "登录过期，请重新登录"
        });
        removeCookie("accessToken");
        removeCookie("accessName");
        router.push({
          path: "/login"
        });
      }
      return response;
    },
    error => {
      return Promise.resolve(error.response);
    }
  );

  //  开始请求
  return new Promise((resolve, reject) => {
    //配置完成，进行请求，axios内的参数都由上面配置进行处理，最后将处理的结果放入，其中timeout为如果请求超过了4000ms则中断请求
    axios({
      baseURL,
      url: path,
      method: method,
      data: data,
      timeout: 4000,
      headers: headers
    })
      .then(result => {
        //请求回调
        if (result !== undefined) {
          resolve(result.data);
        } else {
        }
      })
      .catch(err => {
        //请求错误
        console.log(err);
        reject(err);
      });
  });
}

使用

这里就完成了相关的配置。使用时则如：
可在 main.js 中将 axios 绑在 Vue 原型上
先引入 axios 这个方法，用import axios from "axios配置路径"
Vue.prototype.$axios = axios //这里的$axios可自定义名字
使用时可直接使用，如：

$axios(path, parmas, method = "GET", headerType = "json").then(res=>{
console.log(res)//res 为后台传入的数据
})

参数分别为(请求接口 ,请求参数,请求方式（默认为 GET 方式,可传’post’等） ,from 表单提交（默认为 json,可传’from’。。）),这里同上面的配置

也可在哪里调用在哪里引入，就不多说了。

赏

谢谢你为我点赞

支付宝

微信