import axios from "axios";
axios.get('/users')
.then(res => {
console.log(res.data);
});

npm install axios

import axios from "axios"; 
axios
    .get("/getData")
    .then((res) => {
      console.log(res);
      list.value = res.data.list;
    })
    .catch(function (error) {
      // 處理錯(cuò)誤情況
      console.log(error);
    })
    .then(function () {
      // 總是會(huì)執(zhí)行
    });

const list = ref<ListModel[]>([]);
async function getUrl() {
  const res = await axios.get("/getData", {
    params: {
      id: 1, //需要攜帶參數(shù)
    },
  });
  list.value = res.data.list;
}
getUrl();

function postUrl() {
  axios
    .post("/postData", {
      name: "Fred",
      age: 18,
    })
    .then(function (response) {
      console.log(response.data.message);
    })
    .catch(function (error) {
      console.log(error);
    });
}
postUrl();

// 發(fā)送多個(gè)并發(fā)請(qǐng)求
function getUserInfo() {
  return axios.get("/userInfo");
}
function getToken() {
  return axios.get("/getToken");
}
//同步
Promise.all([getUserInfo(), getToken()]).then((res) => {
  console.log(res, "res");
});
//異步
Promise.race([getUserInfo(), getToken()]).then((res) => {
  console.log(res, "res1111");
});

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

{
  // `url` 是用于請(qǐng)求的服務(wù)器 URL
  url: '/user',
 
  // `method` 是創(chuàng)建請(qǐng)求時(shí)使用的方法
  method: 'get', // 默認(rèn)值
 
  // `baseURL` 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL。
  // 它可以通過(guò)設(shè)置一個(gè) `baseURL` 便于為 axios 實(shí)例的方法傳遞相對(duì) URL
  baseURL: 'https://some-domain.com/api/',
 
  // `transformRequest` 允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 這幾個(gè)請(qǐng)求方法
  // 數(shù)組中最后一個(gè)函數(shù)必須返回一個(gè)字符串， 一個(gè)Buffer實(shí)例，ArrayBuffer，F(xiàn)ormData，或 Stream
  // 你可以修改請(qǐng)求頭。
  transformRequest: [function (data, headers) {
    // 對(duì)發(fā)送的 data 進(jìn)行任意轉(zhuǎn)換處理
 
    return data;
  }],
 
  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應(yīng)數(shù)據(jù)
  transformResponse: [function (data) {
    // 對(duì)接收的 data 進(jìn)行任意轉(zhuǎn)換處理
 
    return data;
  }],
 
  // 自定義請(qǐng)求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` 是與請(qǐng)求一起發(fā)送的 URL 參數(shù)
  // 必須是一個(gè)簡(jiǎn)單對(duì)象或 URLSearchParams 對(duì)象
  params: {
    ID: 12345
  },
 
  // `data` 是作為請(qǐng)求體被發(fā)送的數(shù)據(jù)
  // 僅適用 'PUT', 'POST', 'DELETE 和 'PATCH' 請(qǐng)求方法
  // 在沒(méi)有設(shè)置 `transformRequest` 時(shí)，則必須是以下類(lèi)型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專(zhuān)屬: FormData, File, Blob
  // - Node 專(zhuān)屬: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // `timeout` 指定請(qǐng)求超時(shí)的毫秒數(shù)。
  // 如果請(qǐng)求時(shí)間超過(guò) `timeout` 的值，則請(qǐng)求會(huì)被中斷
  timeout: 1000, // 默認(rèn)值是 `0` (永不超時(shí))
 
  // `withCredentials` 表示跨域請(qǐng)求時(shí)是否需要使用憑證
  withCredentials: false, // default
 
 
  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
  // `responseType` 表示瀏覽器將要響應(yīng)的數(shù)據(jù)類(lèi)型
  // 選項(xiàng)包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 瀏覽器專(zhuān)屬：'blob'
  responseType: 'json', // 默認(rèn)值
 
  // `responseEncoding` 表示用于解碼響應(yīng)的編碼 (Node.js 專(zhuān)屬)
  // 注意：忽略 `responseType` 的值為 'stream'，或者是客戶(hù)端請(qǐng)求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默認(rèn)值
 
  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名稱(chēng)
  xsrfCookieName: 'XSRF-TOKEN', // 默認(rèn)值
 
  // `xsrfHeaderName` 是帶有 xsrf token 值的http 請(qǐng)求頭名稱(chēng)
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默認(rèn)值
 
  // `onUploadProgress` 允許為上傳處理進(jìn)度事件
  // 瀏覽器專(zhuān)屬
  onUploadProgress: function (progressEvent) {
    // 處理原生進(jìn)度事件
  },
 
  // `onDownloadProgress` 允許為下載處理進(jìn)度事件
  // 瀏覽器專(zhuān)屬
  onDownloadProgress: function (progressEvent) {
    // 處理原生進(jìn)度事件
  },
 
  // `maxContentLength` 定義了node.js中允許的HTTP響應(yīng)內(nèi)容的最大字節(jié)數(shù)
  maxContentLength: 2000,
 
  // `maxBodyLength`（僅Node）定義允許的http請(qǐng)求內(nèi)容的最大字節(jié)數(shù)
  maxBodyLength: 2000,
 
  // `validateStatus` 定義了對(duì)于給定的 HTTP狀態(tài)碼是 resolve 還是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者設(shè)置為 `null` 或 `undefined`)，
  // 則promise 將會(huì) resolved，否則是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默認(rèn)值
  },
 
  // `maxRedirects` 定義了在node.js中要遵循的最大重定向數(shù)。
  // 如果設(shè)置為0，則不會(huì)進(jìn)行重定向
  maxRedirects: 5, // 默認(rèn)值
 
  // `proxy` 定義了代理服務(wù)器的主機(jī)名，端口和協(xié)議。
  // 您可以使用常規(guī)的`http_proxy` 和 `https_proxy` 環(huán)境變量。
  // 使用 `false` 可以禁用代理功能，同時(shí)環(huán)境變量也會(huì)被忽略。
  // `auth`表示應(yīng)使用HTTP Basic auth連接到代理，并且提供憑據(jù)。
  // 這將設(shè)置一個(gè) `Proxy-Authorization` 請(qǐng)求頭，它會(huì)覆蓋 `headers` 中已存在的自定義 `Proxy-Authorization` 請(qǐng)求頭。
  // 如果代理服務(wù)器使用 HTTPS，則必須設(shè)置 protocol 為`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
 
  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),
 
}

{
  // `data` 由服務(wù)器提供的響應(yīng)
  data: {},
 
  // `status` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
  status: 200,
 
  // `statusText` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
  statusText: 'OK',
 
  // `headers` 是服務(wù)器響應(yīng)頭
  // 所有的 header 名稱(chēng)都是小寫(xiě)，而且可以使用方括號(hào)語(yǔ)法訪問(wèn)
  // 例如: `response.headers['content-type']`
  headers: {},
 
  // `config` 是 `axios` 請(qǐng)求的配置信息
  config: {},
 
  // `request` 是生成此響應(yīng)的請(qǐng)求
  // 在node.js中它是最后一個(gè)ClientRequest實(shí)例 (in redirects)，
  // 在瀏覽器中則是 XMLHttpRequest 實(shí)例
  request: {}
}

// 使用庫(kù)提供的默認(rèn)配置創(chuàng)建實(shí)例
// 此時(shí)超時(shí)配置的默認(rèn)值是 `0`
const instance = axios.create();
 
// 重寫(xiě)庫(kù)的超時(shí)默認(rèn)值
// 現(xiàn)在，所有使用此實(shí)例的請(qǐng)求都將等待2.5秒，然后才會(huì)超時(shí)
instance.defaults.timeout = 2500;
 
// 重寫(xiě)此請(qǐng)求的超時(shí)時(shí)間，因?yàn)樵撜?qǐng)求需要很長(zhǎng)時(shí)間
instance.get('/longRequest', {
  timeout: 5000
});

// 生成實(shí)例
const instance = axios.create({
  baseURL: "/",
  timeout: 1000,
  headers: { "Content-Type": "multipart/form-data;charset=utf-8" },
});
// 請(qǐng)求的攔截器
instance.interceptors.request.use(
  function (config) {
    // 在發(fā)送請(qǐng)求之前做些什么
    console.log(config, "config");
    return config;
  },
  function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);
// 返回的攔截器
instance.interceptors.response.use(
  function (res) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    console.log(res, "res");
 
    return res;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
  }
);

axios.get('/getData')
  .catch(function (error) {
    if (error.response) {
      // 請(qǐng)求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼，但狀態(tài)代碼超出了 2xx 的范圍
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 請(qǐng)求已經(jīng)成功發(fā)起，但沒(méi)有收到響應(yīng)
      // `error.request` 在瀏覽器中是 XMLHttpRequest 的實(shí)例，
      // 而在node.js中是 http.ClientRequest 的實(shí)例
      console.log(error.request);
    } else {
      // 發(fā)送請(qǐng)求時(shí)出了點(diǎn)問(wèn)題
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

axios.get('/getData', {
  validateStatus: function (status) {
    return status < 500; // 處理狀態(tài)碼小于500的情況
  }
})

const controller = new AbortController();
 
axios.get('/getData', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消請(qǐng)求
controller.abort()

const controller = new AbortController();
 
axios.get('/getData', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消請(qǐng)求
controller.abort()

import type { AxiosInstance, AxiosRequestConfig } from "axios";
import axios from "axios";
 
class Http {
  private readonly options: AxiosRequestConfig;
  private axiosInstance: AxiosInstance;
 
  // 構(gòu)造函數(shù) 參數(shù) options
  constructor(params: AxiosRequestConfig) {
    this.options = params;
    this.axiosInstance = axios.create(params); // 生成實(shí)例
    this.setupInterceptors();
  }
  private setupInterceptors() {
    this.axiosInstance.defaults.baseURL = "/";
    this.axiosInstance.defaults.headers.post["Content-Type"] =
      "application/json";
    this.axiosInstance.interceptors.request.use(
      (config) => {
        if (!config.headers) {
          config.headers = {};
        }
        // config.headers.Authorization = CSRF_TOKEN;
        return config;
      },
      () => {
        return Promise.reject({
          code: 1,
          message: "請(qǐng)求錯(cuò)誤，請(qǐng)聯(lián)系管理員",
        });
      }
    );
 
    this.axiosInstance.interceptors.response.use(
      (response) => {
        return Promise.resolve(response);
      },
      (error) => {
        let message = "";
        if (error.response) {
          switch (error.response.status) {
            case 2:
              message = "未登錄，直接跳轉(zhuǎn)到登錄頁(yè)面";
              break;
            case 3:
              message = "TOKEN過(guò)期，拒絕訪問(wèn)，直接跳轉(zhuǎn)到登錄頁(yè)面";
              break;
            case 4:
              message = "請(qǐng)求路徑錯(cuò)誤";
              break;
            case 5:
              message = "系統(tǒng)異常，請(qǐng)聯(lián)系管理員";
              break;
            default:
              message = "未知錯(cuò)誤，請(qǐng)聯(lián)系管理員";
              break;
          }
        } else {
          if (error.code && error.code == "ECONNABORTED") {
            message = "請(qǐng)求超時(shí)，請(qǐng)檢查網(wǎng)是否正常";
          } else {
            message = "未知錯(cuò)誤，請(qǐng)稍后再試";
          }
        }
        return Promise.reject({
          code: -1,
          message: message,
        });
      }
    );
  }
  /**
   * Http get
   * @param url 請(qǐng)求路徑
   * @param config 配置信息
   * @returns Promise
   */
  get(url: string, config?: any): Promise<any> {
    return new Promise((resolve, reject) => {
      this.axiosInstance
        .get(url, config)
        .then((response) => {
          resolve(response.data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
  /**
   * Http post
   * @param url 請(qǐng)求路徑
   * @param data 請(qǐng)求數(shù)據(jù)
   * @param config 配置
   * @returns Promise
   */
  post(url: string, data?: any, config?: any): Promise<any> {
    return new Promise((reslove, reject) => {
      this.axiosInstance
        .post(url, data, config)
        .then((response) => {
          reslove(response.data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
}
const http = new Http({
  timeout: 1000 * 5,
});
export default http;