将Axios方法转换为获取方法

Question

我在寻找一种方法来翻译用Axios编写的以下方法以进行提取时遇到麻烦。

import axios from 'axios';

const url = 'http://localhost:5000/api/posts/';

URL正在使用'npm run dev'从服务器的端口5000运行

class PostService {

//Get Posts
static getPosts() {
    return new Promise(async (resolve, reject) => {
        try {
            const res = await axios.get(url);
            const data = res.data;
            resolve(
                data.map(post => ({
                    ...post,
                    createdAt: new Date(post.createdAt)
                }))
            );
        } catch (err) {
            reject(err);
        }
    })
}

以上使用promise和axios映射数据

//Create Posts
static insertPost(text, topic, price, location, provider, review) {
    return axios.post(url, {
        text,
        topic,
        price,
        location,
        provider,
        review
    });
}

以上使用axios返回数据

//Delete Posts
static deletePost(id) {
    return axios.delete(`${url}${id}`);
}

}

上面是查找数据库条目的ID，并使用axios删除它。

export default PostService;

Answer 1

第一件事！那是什么第一次可憎？

两个都有承诺

static getPosts() {
  const turnCreatedAtToDate = post => ({
    ...post,
    createdAt: new Date(post.createdAt)
  });

  return axios.get(url)
              .then(data => data.map(turnCreatedAtToDate));
}

或完全异步

static async getPosts() {
  const data = await axios.get(url);
  return data.map(post => ({
    ...post,
    createdAt: new Date(post.createdAt)
  }));
}

但是不要收集所有反图案，将它们放在碗中狂躁地搅拌，然后将其倒入功能中。

返回主题

获取有点冗长：

class PostService {
  //Get Posts
  static async getPosts() {
    const response = await fetch(url);
    const data = await response.json();

    return data.map(post => ({
      ...post,
      createdAt: new Date(post.createdAt)
    }));
  }

  //Create Posts
  static insertPost(text, topic, price, location, provider, review) {
    return fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(text,
        topic,
        price,
        location,
        provider,
        review
      })
    );
  }

  //Delete Posts
  static deletePost(id) {
    return fetch(`${url}${id}`, {
      method: "DELETE"
    });
  }
}

Answer 2

Fetch与axios非常相似，因此转换没有太大不同：

使用JSON响应的通用方法：

  try {
    const url = 'http://localhost:5000/api/posts/';
    const response = await fetch(url);
    const jsonData = await response.json();

    console.log(jsonData); // Do whatever you want with the JSON response...
  } catch (error) {
    console.error(error)
  }

如果我们将为您申请职能，应如下所示：

//Get Posts
static getPosts() {
    return new Promise(async (resolve, reject) => {
        try {
             const url = 'http://localhost:5000/api/posts/';
             const response = await fetch(url);
             const data = await response.json();

             resolve(
                data.map(post => ({
                    ...post,
                    createdAt: new Date(post.createdAt)
                }))
            );
        } catch (err) {
            reject(err);
        }
    })
}

现在是该职位：

//Create Posts
static insertPost(text, topic, price, location, provider, review) {

    const formData = new FormData()
    formData.append('text', text);
    formData.append('price', price);
    formData.append('location', location);
    formData.append('provider', provider);
    formData.append('review', review);

    try {
        const response = await fetch(url, { method: 'POST', body: formData });
        const jsonResponse = await response.json();

        return jsonResponse;
    } catch (error) {
        console.error(error)
    }
}

和删除

//Delete Posts
static deletePost(id) {
    return fetch(`${url}${id}, {method: "DELETE" });
}