GET 和 POST 請求 - daniel-qa/Vue GitHub Wiki

GET 和 POST 請求

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种易于使用的方式来发送 HTTP 请求。

  • 安装
npm install axios

axios是一種HTTP的請求工具，也是Vue的作者尤雨溪推薦使用，比起ajax更為輕量，跟 fetch 一樣使用 promise物件，卻不限至瀏覽器，只需要短短幾行程式碼即可，寫法更加直覺，以下為官方表明特點。

從瀏覽器發出 XMLHttpRequests
可以從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
JSON 數據的自動轉換
客戶端支持防止 XSRF
  • 引入CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios基本用法

  • axios get方法

沒有參數時get請求

axios.get('https://example.com') // 放入要發出get請求網址
  .then(function (response) {
    // 當請求成功時
    console.log(response);
  })
  .catch(function (error) {
    // 請求失敗時
    console.log(error);
  })
  .then(function () {
    // 總是執行
  });
  • 有參數
axios.get('https://example.com', {
    params: {
      ID: 123
    }
}) // 幫你組合成https://example.com?ID=123
  .then(function (response) {
    // 當請求成功時
    console.log(response);
  })
  .catch(function (error) {
    // 請求失敗時
    console.log(error);
  })
  .then(function () {
    // 總是執行
  });
  • axios post方法

使用post請求，傳送name和eamil資料

axios.post('/signup', {
    name: 'Joe',
    email: '[email protected]'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
});

當然除了get，post之外還有其他HTTP請求可以使用，使用方式也是大同小異，就是路由以及HTTP method的改變而已。

攔截器 Interceptor

axios.interceptors.request.use

axios.interceptors.request.use 是 Axios 库中的一个方法，用于在请求发送之前拦截请求。

这在修改请求配置、添加请求头（例如授权令牌）、日志记录或在请求发送前处理错误等场景中非常有用。

下面是一个基本的示例：

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer your_token'; // 添加授权令牌
    console.log('请求被拦截:', config);
    return config; // 必须返回配置对象
  },
  error => {
    // 请求错误时做些什么
    console.error('请求错误:', error);
    return Promise.reject(error); // 返回错误以便后续处理
  }
);

在这个示例中，我们在请求被发送之前添加了一个授权头，并在控制台中打印了请求配置。如果请求发生错误，也会进行相应的处理。

⚠️ **GitHub.com Fallback** ⚠️