vue（24）網路請求模組axios使用

Silent丿丶黑羽發表於2021-07-27
VueiOS

什麼是axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

主要的作用：axios主要是用於向後臺發起請求的，還有在請求中做更多是可控功能。

axios有8個特性

  • 從瀏覽器中建立 XMLHttpRequests
  • 從 `node.js 建立 http 請求
  • 支援 Promise API
  • 攔截請求和響應
  • 轉換請求資料和響應資料
  • 取消請求
  • 自動轉換 JSON 資料
  • 客戶端支援防禦 XSRF
     

安裝

安裝十分簡單，使用 npm:

npm install axios

 

案例

執行 GET 請求

axios
  .get("請求地址", {
    // 拼接引數寫在params中
    params: {
      ID: 12345,
    },
  })
  // 成功後做的事情
  .then(function (response) {
    console.log(response);
  })
  // 失敗後做的事情
  .catch(function (error) {
    console.log(error);
  });

執行POST請求

axios
  .post("請求地址", {
    firstName: "jkc",
    lastName: "123",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

執行併發請求，當我們想要同時發出2個請求，可以使用axios.all()

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

axios.all([getUserAccount(), getUserPermissions()]).then((res) => {
  console.log(res);
});

以上程式碼我們先定義了2個方法，每個方法都會傳送一個請求，最後把2個方法都放在陣列中，這樣程式就會同時執行2個方法，且最後的結果是在陣列中，結果如下：

上面返回的結果是在陣列中，到時候取結果的時候就要用res[0]，如果你覺得這樣麻煩，如果我們想展開的話，可以使用axios.spread方法

axios.all([getUserAccount(), getUserPermissions()]).then(
  axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
  })
);

此時，我們返回的結果就不是一個陣列了，會分開來，結果如下：

 

axios請求配置

以下是建立請求時可以用的配置選項。只有 url 是必需的。如果沒有指定 method，請求將預設使用 get 方法。

{
  // `url` 是用於請求的伺服器 URL
  url: '/user',

  // `method` 是建立請求時使用的方法
  method: 'get', // default

  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  // 它可以通過設定一個 `baseURL` 便於為 axios 例項的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即將被髮送的自定義請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即將與請求一起傳送的 URL 引數
  // 必須是一個無格式物件(plain object)或 URLSearchParams 物件
  params: {
    ID: 12345
  },

  // `data` 是作為請求主體被髮送的資料
  // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
  // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
  timeout: 1000,

  // `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據
  // 這將設定一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設定的自定義 `Authorization`頭
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
}

 

響應結構

傳送網路請求成功後，返回的響應結構如下：

{
  // `data` 由伺服器提供的響應
  data: {},

  // `status` 來自伺服器響應的 HTTP 狀態碼
  status: 200,

    // `statusText` 來自伺服器響應的 HTTP 狀態資訊
    statusText: 'OK',

  // `headers` 伺服器響應的頭
  headers: {},

  // `config` 是為請求提供的配置資訊
  config: {},
  // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

 

配置預設值

配置網路請求時，你可以指定將被用在各個請求的配置預設值
 

全域性的 axios 預設值

axios.defaults.baseURL = 'https://api.example.com';  // 配置預設的baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  // 配置預設請求頭中的Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  // 配置預設的post請求方式

 

自定義例項預設值

// 建立例項時配置預設值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 建立例項後更改預設值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

// 2.1.請求攔截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些資訊不符合伺服器的要求
      // 2.比如每次傳送網路請求時，都希望在介面中顯示一個請求的圖示
      // 3.某些網路請求（比如登入（token）），必須攜帶一些特殊的資訊
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.響應攔截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

 

專案中axios完整的封裝

在真實專案開發中，我們會在src資料夾中建立一個utils資料夾，然後在資料夾中建立一個request.js檔案，寫入如下程式碼：

import axios from "axios";

export function request(config) {
  // 1.建立axios的例項
  const instance = axios.create({
    baseURL: "http://xxx.xxx.xx.xx:8000",
    timeout: 5000,
  });

  // 2.1.請求攔截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些資訊不符合伺服器的要求
      // 2.比如每次傳送網路請求時，都希望在介面中顯示一個請求的圖示
      // 3.某些網路請求（比如登入（token）），必須攜帶一些特殊的資訊
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.響應攔截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

  // 3.傳送真正的網路請求
  return instance(config);
}

最後我們在main.js中給網路請求配置下全域性屬性即可

import { request } from "@/utils/request";

Vue.prototype.$request = request;

這樣以後，我們在任何目錄下，都可以直接使用request網路請求，不需要每次都匯入了

相關文章