vue中配置axios.js文件，发送请求

为了统一管理请求，每个项目都会去配置axios；而不是在vue中直接使用，那样不好维护等等

下面是我配置的最基础的axios文件

第一步：首先新建一个axios文件，我是放在router文件下的

import axios from "axios";
import { Toast } from "mint-ui"; // 我用的mint的框架来弹出我的错误返回 大家可以用别的提示（移动端的组件库）
import router from "@/router/index.js";

// 默认超时设置
axios.defaults.timeout = 5000;

// 相对路径设置
axios.defaults.baseURL = "";

//http request 拦截器
axios.interceptors.request.use(
  (config) => {
    // 获取token
    const token = localStorage.getItem("cc_token");
    // 设置参数格式
    if (!config.headers["Content-Type"]) {
      config.headers = {
        "Content-Type": "application/json",
        // application/x-www-form-urlencoded
      };
    }
    // 添加token到headers
    if (token) {
      config.headers.token = token;
    }
    // 鉴权参数设置
    if (config.method === "get") {
      //get请求下 参数在params中，其他请求在data中
      config.params = config.params || {};
      let json = JSON.parse(JSON.stringify(config.params));
      //一些参数处理
    } else {
      config.data = config.data || {};
      //一些参数处理
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  (response) => {
    //一些统一code的返回处理
    if (response.data.code === 501) {
      // 登录验证
      //做了个示例跳转项目中登录，并记录下相对路径
      router.push({
        name: "login", //从哪个页面跳转
        query: {
          retUrl: window.location.href.split("#")[1] || "",
          is_new_user_url: 1,
        },
      });
    }
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axios

第二步：发送请求，再项目中请求接口基本上是按照业务或者功能划分的

我在src下新建api的文件夹, 然后新建一个login.js 文件，用来放关于登录的接口的

import request from "@/router/axios";  //引入封装的axios，也就是步骤一中的axios文件


//发送get请求
export const getLoginApi = (params) => {
  return request({
    url: "www.baidu.com",
    method: "get",  
    params: { ...params },    //或者 写成  params，也是可以的
　　 // params,   这是简写
  });
};

//发送post请求  这个请求是404因为百度没有post这个接口
export const getLoginApi = (params) => {
  return request({
    url: "www.baidu.com",
    method: "post",  
    data:params
  });
};

第三步：在页面使用

  import { getLoginApi } from "@/api/login";   //在对应的vue页面中，引入刚刚的请求接口

　 //就可以使用了

    let params = {

      cardId: 342511635445,

      code: 666666,

    };

    getLoginApi(params).then((res) => {

      console.log(res, "----------");

    });