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, "----------");

    });