什麼是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網路請求，不需要每次都匯入了