快捷導(dǎo)航

Vue中request.js封裝及調(diào)用示例詳解

更新時間：2023年09月05日 16:07:28 作者：ClearBoth

這篇文章主要為大家介紹了Vue中request.js封裝及調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

request.js封裝

import axios, { AxiosRequestConfig } from "axios";
import qs from "qs";
// 創(chuàng)建axios實例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASEURL,
  timeout: 6000,
  // headers: {
  //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
  // token:
  //   "MTY1Mjk1Mjg4OC42ODM2Nzg0JjJkNzUyOWQwOWU3NTU2OTE0OTU4NzI3ODUxNzkwYTNjZGMwZmRjNjAzNGQ4MGE1YzFkODE1NGVmYzk4MmMyYjM=",
  // },
});
// 請求攔截器
instance.interceptors.request.use(
  (config) => {
    // 請求頭和token判斷等
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);
//響應(yīng)攔截器
instance.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (error) => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = "請求錯誤(400)";
          break;
        case 401:
          error.message = "未授權(quán),請登錄(401)";
          break;
        case 403:
          error.message = "拒絕訪問(403)";
          break;
        case 404:
          error.message = `請求地址出錯: ${error.response.config.url}`;
          break;
        case 405:
          error.message = "請求方法未允許(405)";
          break;
        case 408:
          error.message = "請求超時(408)";
          break;
        case 500:
          error.message = "服務(wù)器內(nèi)部錯誤(500)";
          break;
        case 501:
          error.message = "服務(wù)未實現(xiàn)(501)";
          break;
        case 502:
          error.message = "網(wǎng)絡(luò)錯誤(502)";
          break;
        case 503:
          error.message = "服務(wù)不可用(503)";
          break;
        case 504:
          error.message = "網(wǎng)絡(luò)超時(504)";
          break;
        case 505:
          error.message = "HTTP版本不受支持(505)";
          break;
        default:
          error.message = `連接錯誤: ${error.message}`;
      }
    } else {
      if (error.message == "Network Error")
        error.message == "網(wǎng)絡(luò)異常，請檢查后重試！";
        error.message = "連接到服務(wù)器失敗，請聯(lián)系管理員";
    }
    return Promise.reject(error);
  }
);
//get請求
export function get(url: string, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
//post請求
export function post(url: string, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, qs.stringify(params))
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// delete請求
export function deleteFn(url: string, params: AxiosRequestConfig<any> | undefined) {
  return new Promise((resolve, reject) => {
    instance
      .delete(url, params)
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// put請求
export function put(url: string, params: any) {
  return new Promise((resolve, reject) => {
    instance
      .put(url, qs.stringify(params))
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
export default instance;

調(diào)用

import { get, post, deleteFn, put } from "../utils/request";
export const login_api = (params: {} | undefined) => {
  return get("/XXXX/xxx", params);
};

在.vue中使用之前先import進(jìn)來就可以了

以上就是Vue中request.js封裝及調(diào)用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue request.js封裝的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: