vue（24）網絡請求模塊axios使用

什么是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網絡請求，不需要每次都導入了