Question

我正在尝试使用fetch API获取网页的HTML。这是我的代码。

var quizUrl = 'http://www.lipsum.com/';
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/html');
fetch(quizUrl,{
    mode: 'no-cors',
    method: 'get',
    headers: myHeaders
}).then(function(response) {
    response.text().then(function(text) {
        console.log(text);
    })
}).catch(function(err) {
  console.log(err)
});

返回空字符串。有没有猜到它为什么不起作用？

Answer 1

我想这可能会有所帮助，请按以下方式使用：

fetch('/url/to/server')
.then((res) => {
      return res.text();
})
.then((data) => {
     $('#container').html(data);
});

在服务器端，将内容作为纯文本返回，而不设置标题内容类型。

我使用$('#container')来表示您想要的容器检索它后的html数据。

获取json数据的不同之处在于使用res.json()代替 res.text() 而且，不要附加任何标题

Answer 2

关于Request.mode 'no-cors' _{（来自MDN，强调我的）}

防止该方法不是HEAD，GET或POST。如果任何ServiceWorkers拦截这些请求，他们可能不会添加或覆盖除these之外的任何标头。此外， JavaScript可能无法访问生成的Response的任何属性。这可确保ServiceWorkers不会影响Web的语义，并防止因跨域泄漏数据而导致的安全和隐私问题。

因此，这将启用请求，但会将响应设为opaque，即您无法从中获取任何内容，除非知道目标在那里。

由于您尝试获取跨域域，因此与代理路由无关。

PS：这是一个片段，显示请求确实是不透明的：

＆＃13;

var quizUrl = 'http://www.lipsum.com/';
fetch(quizUrl, {
  mode: 'no-cors',
  method: 'get'
}).then(function(response) {
  console.log(response.type)
}).catch(function(err) {
  console.log(err) // this won't trigger because there is no actual error
});

＆＃13;

Answer 3

2021 答案：以防万一您登陆这里寻找与 axios 相比如何使用 async/await 或 promise 发出 GET 和 POST Fetch api 请求。

我使用 jsonplaceholder fake API 来演示：

使用 async/await 获取 api GET 请求：

         const asyncGetCall = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                 const data = await response.json();
                // enter you logic when the fetch is successful
                 console.log(data);
               } catch(error) {
            // enter your logic for when there is an error (ex. error toast)
                  console.log(error)
                 } 
            }


          asyncGetCall()

使用 async/await 获取 api POST 请求：

    const asyncPostCall = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
                 method: 'POST',
                 headers: {
                   'Content-Type': 'application/json'
                   },
                   body: JSON.stringify({
             // your expected POST request payload goes here
                     title: "My post title",
                     body: "My post content."
                    })
                 });
                 const data = await response.json();
              // enter you logic when the fetch is successful
                 console.log(data);
               } catch(error) {
             // enter your logic for when there is an error (ex. error toast)

                  console.log(error)
                 } 
            }

asyncPostCall()

使用 Promise 的 GET 请求：

  fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json())
  .then(data => {
   // enter you logic when the fetch is successful
    console.log(data)
  })
  .catch(error => {
    // enter your logic for when there is an error (ex. error toast)
   console.log(error)
  })

使用 Promise 的 POST 请求：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
   body: JSON.stringify({
     // your expected POST request payload goes here
      title: "My post title",
      body: "My post content."
      })
})
  .then(res => res.json())
  .then(data => {
   // enter you logic when the fetch is successful
    console.log(data)
  })
  .catch(error => {
  // enter your logic for when there is an error (ex. error toast)
   console.log(error)
  })

使用 Axios 的 GET 请求：

        const axiosGetCall = async () => {
            try {
              const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    // enter you logic when the fetch is successful
              console.log(`data: `, data)
           
            } catch (error) {
    // enter your logic for when there is an error (ex. error toast)
              console.log(`error: `, error)
            }
          }
    
    axiosGetCall()

使用 Axios 的 POST 请求：

const axiosPostCall = async () => {
    try {
      const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts',  {
      // your expected POST request payload goes here
      title: "My post title",
      body: "My post content."
      })
   // enter you logic when the fetch is successful
      console.log(`data: `, data)
   
    } catch (error) {
  // enter your logic for when there is an error (ex. error toast)
      console.log(`error: `, error)
    }
  }


axiosPostCall()

Answer 4

如果您有自己的后端，请尝试制作一个从 API 检索信息的函数（在您的后端），并使用您的前端从您的函数中检索信息。出于安全原因，某些 API 不允许直接通过浏览器（前端）检索数据。

总结：

==>从后端创建一个从 API 检索信息的函数

==>然后从前端创建一个函数，从后端返回的函数中检索数据

获取API以获取HTML响应

4 个答案: