axios

這是一個非常簡單的例子，展示了一個表單接受GitHub用戶名稱，一旦接收到submit事件，它將向 GitHub API 請求該用戶的信息並打印。 這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時，這個名稱被綁定到它的狀態中。 當按下Add card時，清除Form組件的userName狀態，以清除輸入表單。 除了 React，該示例還使用了Axios庫。這是一個很好的輕量級庫，用於處理網絡請求。可在 CodePen 中的設置中添加它，或者使用npm install axios在本地安裝它。 輸出: 代碼: 首先創建 Card 組件，這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據，使用： props.avatar_url 用戶頭像 props.name 用戶名稱 props.blog 用戶個人網站的URL const Card = props => { return ( <div style={{ margin: '1em' }}> <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} /> <div> <div style={{ fontWeight: 'bold' }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) } 我們創建了一個 Card 組件的列表，它將作為父組件中的 cards 屬性傳遞給 CardList ，使用 map() 函數遍歷它並輸出一個卡片列表： const CardList = props => ( <div> {props....

Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 介绍Axios 安装 Axios API GET请求 给GET请求添加参数 POST请求 介绍Axios Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 它支持所有现代浏览器，包括对IE8及更高版本的支持。 它基于Promise，这使得我们可以使用async/await代码来轻松地执行XHR请求。 与原生的Fetch API相比，使用Axios有很多优势： 支持较旧的浏览器（Fetch需要一个polyfill） 支持中止请求的方式 支持设置响应超时的方式 内置的CSRF保护 支持上传进度 执行自动的JSON数据转换 在Node.js中工作 安装 可以使用npm在Node.js中安装Axios： npm install axios 在浏览器中，可以使用unpkg.com将其包含在页面中： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 需要注意的是，API调用必须启用CORS，以便在浏览器中访问，否则请求将失败。 Axios API 可以从"axios"对象开始一个HTTP请求： axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) 这将返回一个promise。您可以使用async/await来解析该promise以获取响应对象： ;(async () => { const response = await axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) console.log(response) })() 为方便起见，通常会使用以下方法： axios.get() axios.post() 与jQuery中的$.ajax()相比，它们提供了更简洁的语法。例如： ;(async () => { const response = await axios.get('https://dog.ceo/api/breeds/list/all') console.log(response) })() Axios提供了所有HTTP动词的方法，虽然它们不太常用，但仍然会被使用：...

了解如何使用Node進行HTTP POST請求 在Node中進行HTTP POST請求有很多方法，具體取決於你想使用的抽象級別。 在Node中執行HTTP請求最簡單的方法是使用Axios庫： const axios = require('axios') axios .post('/todos', { todo: '買牛奶', }) .then((res) => { console.log(`statusCode: ${res.statusCode}`) console.log(res) }) .catch((error) => { console.error(error) }) 另一種方法是使用Request庫： const request = require('request') request.post( '/todos', { json: { todo: '買牛奶', }, }, (error, res, body) => { if (error) { console.error(error) return } console.log(`statusCode: ${res.statusCode}`) console.log(body) } ) 到目前為止介紹的2種方法需要使用第三方庫。 使用Node標準模塊也可以進行POST請求，雖然比前面兩種選項更冗長： const https = require('https') const data = JSON.stringify({ todo: '買牛奶', }) const options = { hostname: 'yourwebsite....

Axios 是一个非常方便的 JavaScript 库，可以在 Node.js 中执行 HTTP 请求。 介绍 安装 Axios API GET 请求 在 GET 请求中添加参数 POST 请求 介绍 Axios 是一个非常受欢迎的 JavaScript 库，可以用来执行 HTTP 请求，适用于浏览器和 Node.js 平台。 它支持所有现代浏览器，包括对 IE8 及更高版本的支持。 它基于 Promise，并且可以使用 async/await 代码非常容易地执行 XHR 请求。 与原生的 Fetch API 相比，使用 Axios 具有许多优势： 支持旧版浏览器（Fetch 需要使用 polyfill） 可以中断请求 可以设置响应超时 内置 CSRF 保护 支持上传进度 执行自动的 JSON 数据转换 可用于 Node.js 安装 可以使用 npm 安装 Axios： npm install axios 或者使用 yarn 安装： yarn add axios 可以通过 unpkg....

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。 該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。 在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。 無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。 首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。 我向該端點發送一個帶有2個屬性的對象： { name: 'Roger', age: 8 } 作為JSON編碼。 我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。 XHR 第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫： const data = JSON.stringify({ name: 'Roger', age: 8 }); const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { console.log(this.responseText); } }); xhr.open('POST', 'https://api.randomservice.com/dog'); xhr.setRequestHeader('content-type', 'application/json'); xhr.setRequestHeader('authorization', 'Bearer 123abc456def'); xhr.send(data); Fetch API 然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API： fetch('https://api.randomservice.com/dog', { method: 'POST', headers: { 'content-type': 'application/json', authorization: 'Bearer 123abc456def' }, body: JSON....

学习如何使用Axios发送授权头部 在Axios的POST请求中设置头部，只需要将第三个对象传递给axios.post()方法。 你可能已经在使用第二个参数发送数据了，如果你在URL字符串之后传递了2个对象，第一个对象是数据，第二个对象是配置对象，其中需要添加一个headers属性，它是另一个对象。 axios.post(url, { data: { ... } }) axios.post(url, { //...data }, { headers: { ... } }) 要设置授权头部，请按照以下方式调用： const token = '..你的令牌..' axios.post(url, { //...data }, { headers: { 'Authorization': `Basic ${token}` } }) （授权令牌可能不同，请确定你使用的应用程序） 在Axios的GET请求中设置头部，只需要将第二个对象传递给axios.get()方法，例如下面是一个对GitHub的GET请求 /user： axios.get('https://api.github.com/user', { headers: { 'Authorization': `token ${access_token}` } }) .then((res) => { console.log(res.data) }) .catch((error) => { console.error(error) }) 我正在使用WordPress API进行一些工作，需要进行POST请求进行身份验证。 对我来说最简单的方式是使用基本身份验证。 我使用Axios，所以我将Authorization头部设置为POST请求，如下所示： const username = '' const password = '' const token = Buffer....

學習如何使用Axios發送url編碼的數據 我遇到了這個問題：我需要從一個Node.js應用程序中調用的API只接受url編碼格式的數據。 我必須找出解決這個問題的方法：如何使用Axios發送url編碼的數據？ 首先，我們需要安裝qs模塊。這是一個很棒的查詢字符串解析和字符串化庫，還帶有一些額外的安全功能： npm install qs 然後，我們需要導入qs模塊以及當然還有Axios的導入語句： const qs = require('qs') const axios = require('axios') 如果你使用的是ES模塊，請使用： import qs from 'qs' import axios from 'axios' 接下來，是Axios代碼。如果你對它不熟悉，請參閱我的完整的Axios教程。 簡而言之，我們需要使用Axios請求的完整形式，而不是axios.post()，而是axios()。 在其中，我們使用了qs提供的stringify()方法，並將數據包裹在其中。然後，我們設置了content-type標頭： axios({ method: 'post', url: 'https://my-api.com', data: qs.stringify({ item1: 'value1', item2: 'value2' }), headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' } })

我曾經需要從互聯網上下載文件，而且還想使用await以簡單的方式在完成後做其他事情。 您可以使用Axios達到這個目的。 import axios from 'axios' 然後寫一個像這樣的download()函數： async function download(url, filepath) { const response = await axios({ url, method: 'GET', responseType: 'stream', }) return new Promise((resolve, reject) => { response.data .pipe(fs.createWriteStream(filepath)) .on('error', reject) .once('close', () => resolve(filepath)) }) } 然後使用以下方式調用： const remote_url = 'https://...' const local_path = './images/test.png' await download(remote_url, local_path)

在 Next.js 中，在伺服器端渲染時存取 Cookie 可能比你想像中困難。以下是我解決這個問題的方法。 我遇到了這個問題。我的應用程式依賴於Cookie進行身份驗證，在使用 Next.js 時，顯然我的 Cookie 在首頁初始化時未被設置。 以下是負責使用Axios對一個 GET 端點進行請求的程式碼： Bookings.getInitialProps = async ctx => { const response = await axios.get('http://localhost:3000/api/bookings/list') return { bookings: response.data } } 我在伺服器端的端點上有 Passport.js，但它無法在 SSR 頁面上對用戶進行身份驗證，因為它找不到任何 Cookie。 我必須將程式碼更改為以下形式，將 Cookie 添加到 headers 中： Bookings.getInitialProps = async ctx => { const response = await axios({ method: 'get', url: 'http://localhost:3000/api/bookings/list', headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined }) return { bookings: response.data } } 讓 Cookie 在後端中可用的關鍵是添加：...

我使用 Axios 與一個設定了 JWT 權杖的 API 進行交互。 該 API 在 cookie 中返回該令牌，我很快發現我需要在 Axios 選項中設置 withCredentials: true: import axios from 'axios' axios.post(API\_SERVER + '/login', { email, password }, { withCredentials: true }) 否則，cookie 將不會被保存。 我還需要在我發出的每個其他請求中設置它，以將 JWT 權杖發送到服務器: axios.get(API\_SERVER + '/todos', { withCredentials: true }) 現在，對於少量請求，這是可行的，但對於許多請求，您可能希望使用一個通用的配置。 您可以使用 create() 方法來創建一個新的 Axios 實例，然後在您的請求中使用它: import axios from 'axios' const instance = axios.create({ withCredentials: true }) instance.get(API\_SERVER + '/todos') 通常還會添加一個 baseURL 屬性: import axios from 'axios' const instance = axios....