axios 在Vue中的使用 （對axios 的用法

在使用之前，先了解一下什么是axios

axios 參考鏈接 http://www.axios-js.com/zh-cn/docs/ 

具體步驟

1.安裝axiso

npm install axios

2.在全局注冊（main.js)

 

 

3.新建一個文件夾 （我這里叫req),新建兩個js文件（我這里是index.js dq.js)

index.js 用於對axios 進行一些初始化操作

dq.js 用於統一寫請求

 

 

 　

3.1 對axios 進行初始化操作

引入   import axios from "axios";

創建axios 實例 

const service = axios.create({
  baseURL: "http://172.16.227.12:808", // api的base_url
  timeout: 10000 // 請求超時時間
  // transformRequest: data => qs.stringify(data)
});

　錯誤情況下的處理

const err = error => {
  if (error.response) {
    const data = error.response.data;
    // const token = localStorage.getItem("token");
    if (error.response.status === 403) {
      ElementUI.Message({
        message: "提示信息",
        type: "warning"
      });
    }
    if (
      error.response.status === 401 &&
      !(data.result && data.result.isLogin)
    ) {
      ElementUI.Message({
        message: "提示信息",
        type: "warning"
      });
    }
  }
  return Promise.reject(error);
};

　　請求攔截

// response interceptor  請求攔截
service.interceptors.request.use(function(config) {
  console.log("采用了請求攔截", config, localStorage.getItem("token"));
  if (localStorage.getItem("token") === null) {
    // 寫你的邏輯
    //此時為空 未登錄
    config.data = JSON.stringify(config.data);
    router.push("/login").catch(() => {});
    return config;
  } else {
    config.headers["Authorization"] = "Bearer " + localStorage.getItem("token"); // 請求頭攜帶token  token暫時用h5存儲
    return config; // 必須要返回 否則會報錯
  }
}, err);

　　響應攔截

// 響應攔截器  這里的狀態碼是后端返回給你的
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服務器狀態碼不是200的情況
  error => {
    return Promise.reject(error.response);
  }
);

　　最后一定要暴露出去

export default service; // 暴露出去給統一寫請求的用 （在我這里是dq.js)

3.2統一寫請求api  dq.js

// 請求統一在這里 每一個都暴露出去，在需要用的地方調用

import axios from "./index"; // 將處理好的axios拿來用

const url =
  "https://www.fastmock.site/mock/5840ace5ee7fd2dd081accc891d1e7a0/test1";
const urlapi = "http://172.16.227.12:8088";
// 登錄
export const Login = params =>
  axios({
    url: url + "/login",
    method: "get",
    params: params
  });
// 添加菜單

export const AddMenu = params =>
  axios({
    url: urlapi + "/role/addMenu",
    method: "get",
    params: params
  });

　4.調用獲取數據

在要用的地方引入 

import { getPermissionList, AddMenu } from "@/req/dq.js";

　　在下方使用 例如AddMenu

 EditSubmit() {
      console.log(this.ruleForm);
      // this.ruleForm = {};
      this.DialogEditVisible = false;
      AddMenu({
        Url: this.ruleForm.Url,
        // parentName: this.ruleForm.parentName,
        menuName: this.ruleForm.menuName,
        parentId: this.ruleForm.parentId
      }).then(res => {
        console.log(res);
      });
    },

　　最后附上 axiso 初始化的 index.js 具體還可以對其做其他操作  參考鏈接 http://www.axios-js.com/zh-cn/docs/ 

import axios from "axios";
import router from "../router";
import ElementUI from "element-ui"; // 提示信息根據你的Ui來定

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 創建axios實例
const service = axios.create({
  baseURL: "http://172.16.227.12:808", // api的base_url
  timeout: 10000 // 請求超時時間
  // transformRequest: data => qs.stringify(data)
});

// error 情況下
const err = error => {
  if (error.response) {
    const data = error.response.data;
    // const token = localStorage.getItem("token");
    if (error.response.status === 403) {
      ElementUI.Message({
        message: "提示信息",
        type: "warning"
      });
    }
    if (
      error.response.status === 401 &&
      !(data.result && data.result.isLogin)
    ) {
      ElementUI.Message({
        message: "提示信息",
        type: "warning"
      });
    }
  }
  return Promise.reject(error);
};

// response interceptor  請求攔截
service.interceptors.request.use(function(config) {
  console.log("采用了請求攔截", config, localStorage.getItem("token"));
  if (localStorage.getItem("token") === null) {
    // 寫你的邏輯
    //此時為空 未登錄
    config.data = JSON.stringify(config.data);
    router.push("/login").catch(() => {});
    return config;
  } else {
    config.headers["Authorization"] = "Bearer " + localStorage.getItem("token"); // 請求頭攜帶token  token暫時用h5存儲
    return config; // 必須要返回 否則會報錯
  }
}, err);

// 響應攔截器  這里的狀態碼是后端返回給你的
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服務器狀態碼不是200的情況
  error => {
    return Promise.reject(error.response);
  }
);
export default service; // 暴露出去給統一寫請求的用 （在我這里是dq.js)