woocommerce axios react

时间：2018-12-11 作者：Enrique René

我不明白为什么我对WooCommerce API的请求不起作用。我通过axios在react应用程序上的使用情况：

第一次尝试：

return axios.get( \'http://domain/wp-json/wc/v3/products?featured=true\',
  {
      headers: {
        \'consumer_key\': \'ck_xxx\',
        \'consumer_secret\': \'cs_xxx\',
        \'key_id\': 111,
        \'key_permissions\': \'read_write\',
        \'user_id\': 111,
  }
)

第二个：

return axios( {
  url: \'http://domain/wp-json/wc/v3/products?featured=true\',
    headers: {
      \'origin\': \'http;//localhost:3000\',
      \'consumer_key\': \'ck_x\',
      \'consumer_secret\': \'cs_x\',
      \'key_id\': 111,
      \'key_permissions\': \'read_write\',
      \'user_id\': 111,
      },
      method: \'GET\',
    }
} )

我得到了CORS错误。但使用失眠软件，我创建了一个GET请求http://domain/wp-json/wc/v3/products?featured=true 使用基本身份验证选项卡：

USERNAME ck_x
PASSWORD cs_x

因此，响应状态为200 OK。

我很高兴在我的React应用程序中了解我在axios中做错了什么。

2 个回复

最合适的回答,由SO网友:Caio Mars 整理而成

我在Woocommerce Oauth 1.0身份验证和this solution 为我工作。我正在本地主机上运行它，到目前为止还不错。

Edit:

让我详细解释一下这个答案。昨晚我刚开始学习反应，最好的学习方法就是做。我会以新手的身份向新手解释。我们开始吧。。。

我创建了这个可以从任何组件调用的Woocommerce帮助对象，它为您完成了所有艰苦的工作：

Woocommerce.js

import axios from "axios";
import Oauth from "oauth-1.0a";
import CryptoJS from "crypto-js";
import jQuery from "jquery";

const ck = "ck_...";
const cs = "cs_...";
const baseURL = "http://yourdomain.com/wp-json";

const Woocommerce = {
  getProducts: () => {
    return makeRequest("/wc/v3/products");
  },
  getProductByID: id => {
    return makeRequest("/wc/v3/products/" + id);
  }
};

function makeRequest(endpoint, method = "GET") {
  const oauth = getOauth();

  const requestData = {
    url: baseURL + endpoint,
    method
  };

  const requestHTTP =
    requestData.url + "?" + jQuery.param(oauth.authorize(requestData));

  return axios.get(requestHTTP);
}

function getOauth() {
  return Oauth({
    consumer: {
      key: ck,
      secret: cs
    },
    signature_method: "HMAC-SHA1",
    hash_function: function(base_string, key) {
      return CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(base_string, key));
    }
  });
}

export default Woocommerce;

您需要通过运行以下命令来安装所有必要的软件包：

npm install axios jquery crypto-js
npm install oauth-1.0a --production

How to use it

首先将其导入组件：

import Woocommerce from "./functions/Woocommerce";

然后从组件内部，您可以这样调用它以获取所有产品：

// All products (array of objects)
state = { products: [], isLoaded: false };

componentWillMount() {
  Woocommerce.getProducts().then(res =>
    this.setState({ products: res.data, isLoaded: true })
  );
}

或者，要按ID仅获取一个产品，您可以执行以下操作：

// Single product (object)
state = { product: {}, isLoaded: false };

componentWillMount() {
  Woocommerce.getProductByID(123).then(res =>
    this.setState({ product: res.data, isLoaded: true })
  );
}

正如您可能看到的，您可以在Woocommerce助手中详细说明更多功能，并根据需要使用Woocommerce REST API检索产品。

快乐编码…；）

SO网友:Xavier Lopez

谢谢，@ColdTuna！

以防有人想要一个带有React挂钩的示例代码：

Products.js

import React from \'react\';
import { useEffect, useState } from "react";
import Woocommerce from "../functions/Woocommerce";


function Products() {
  const [products, setProducts] = useState(0);
    
  useEffect(() => {
        Woocommerce.getProducts()
            .then( (res) => {
                setProducts(res.data)
            } );     
        },[]
    );

  return (
    <ul>
      {Object.values(products).map( (item, itemIndex) => {
          return <li key={item.id}>{itemIndex}-{item.name},{item.price} - 
                    {
                      item.images.map( (image, imgIndex) => {
                        return <img key={imgIndex} src={image.src}></img>;
                      })
                    }   
                </li>
      })
      }
    </ul>
  );
}
  
export default Products

小码农CODE

woocommerce axios react

相关推荐

Php致命错误：无法将WP_REST_RESPONSE类型的对象用作wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php中