Пример выборки

JavaScript

Введение

Fetch APIИнтерфейс JavaScript предоставляется для доступа и управления частями канала HTTP, такими как запросы и ответы. Он также предоставляет глобальнуюfetch()метод, который обеспечивает простой и логичный способ асинхронного получения ресурсов по сети.

fetch()Должен принимать один параметр --- путь. Независимо от того, успешен запрос или нет, он возвращает объект Promise, а разрешение соответствует запрошенному.Response. Кроме того, вы также можете установить второй параметр (необязательный параметр)options(Общие конфигурации следующие, для получения подробной информации см.Request).

настроить

options={
    // 请求方式 GET,POST,等
    method: "GET", 
    
    // 请求头headers   
    headers: {
        Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json;charset=UTF-8', 
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
	},
	
    // omit: 从不发送cookies.
    // same-origin 只有当URL与响应脚本同源才发送 cookies
    // include 总是发送请求资源域在本地的 cookies 验证信息
    credentials: 'include'，
    
    //包含请求的模式 (例如： cors, no-cors, same-origin, navigate)
    //no-cors: 常用于跨域请求不带CORS响应头场景
    //cors表示同域和带有CORS响应头的跨域下可请求成功. 其他请求将被拒绝
    mode: 'cors'，
    
    //包含请求的缓存模式 (例如： default, reload, no-cache).具体参数见下面（cache参数）
    cache: 'default'
}
параметр кеша

cache указывает, как обращаться с кешем в соответствии со спецификацией http, и имеет следующие значения:

  1. по умолчанию: Браузер ищет соответствующие запросы из кэша HTTP.
  2. no-store: браузер извлекает ресурс с удаленного сервера без предварительного просмотра кеша и не обновляет кеш загруженным ресурсом
  3. reload: существование HTTP-кеша будет игнорироваться до запроса, но после того, как запрос получит ответ, он будет активно обновлять HTTP-кэш.
  4. no-cache: если кеш есть, то fetch отправит условный запрос и обычный запрос, а после получения ответа обновит http-кеш.
  5. force-cache: Браузер ищет в своем HTTP-кэше соответствующие запросы.
    • Если есть совпадение,свежий или устаревший, он будет возвращен из кеша.
    • Если совпадения нет, браузер сделает обычный запрос и обновит кеш загруженным ресурсом.
  6. only-if-cached: fetch принудительно извлекает кеш, (выбирает из кеша, даже если срок действия кеша истек) Если кеша нет, браузер вернет ошибку

кейс

Это относительно простой случай, поэтому для ясности проблема с отловом здесь не рассматривается.

var url = 'https://zhidao.baidu.com/question/api/hotword?pn=1561&rn=5&t=1551165472017';
fetch(url).then(function(response) {
  return response;
}).then(function(data) {
  console.log(data);
})

Вы можете самостоятельно вставить этот код прямо в консоль.Чтобы не допустить политики одного источника и увидеть более подробные данные, лучше ввести его в консоли по адресу https://zhidao.baidu.com. Если на других страницах мы должны добавить {mode: "no-cors"} ко второму параметру метода fetch. Чтобы лучше видеть, я публикую результаты печати этих двух случаев следующим образом:

По адресу https://zhidao.baidu.com ввод веб-консоли

Адреса, введенные в других веб-консолях

Мы обнаружим, что два результата печати в основном разные. Во-первых, многие данные в результатах междоменной печати пусты. Кроме того, мы также обнаружили, что типы также различны. Здесь мы вводим response.type.

Тип ответа ( response.type ) запроса на выборку является одним из следующих трех:

  • базовый, в том же домене тип ответа "базовый".
  • cors в междоменном режиме возвращает заголовок ответа cors, а тип ответа — «cors».
  • непрозрачный, при междоменном, сервер не возвращает заголовок ответа cors, а тип ответа "непрозрачный".

fetchзадавать{mode='no-cors'}Указывает, что это не междоменный запрос может быть успешным, но данные, возвращаемые сервером, не могут быть получены

Увидев это, встревоженные студенты обнаружат, что данные по-прежнему недоступны, мы просто получили объект Response. Итак, как получить данные?

и вот:

var url = 'https://zhidao.baidu.com/question/api/hotword?pn=1561&rn=5&t=1551165472017';
fetch(url).then(function(response) {
  //通过 response 原型上的 json 方法拿到数据，在返回出去
  return response.json();
}).then(function(data) {
  // 接收到 data 打印出来
  console.log(data);
})

Получите данные с помощью метода json в прототипе ответа и верните его. Прототип ответа печатается следующим образом:

Здесь следует отметить, что метод ответа .json/response.text можно использовать только один и только один раз, использование двух одновременно или его использование дважды сообщит о следующей ошибке:

Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream is locked

Почему нельзя использовать дважды?

Поток данных может быть прочитан только один раз. После чтения поток данных становится пустым, и при прочтении будет сообщено ошибка при чтении. Копия может быть сделана с использованием ответа .CLONE ().

Почему только один раз прочитать?

Ответ все еще находится в поиске, и я надеюсь, что знающие его читатели могут подсказать.

Вышеприведенный способ записи, кажется, имеет обратные вызовы и цепные вызовы. Давайте попробуем новый способ записи. Здесь мы используем async/await для достижения:

var url = 'https://zhidao.baidu.com/question/api/hotword?pn=1&rn=5&t=1551191647420';
let getData = async () => {
    let response = await fetch(url);
    let data = response.json();
    console.log(data)
}

Распечатайте данные следующим образом:

Здесь data — это объект Promise, поскольку его внутреннюю переменную [[PromiseValue]] нельзя получить извне, ее можно получить только в then, поэтому добавьте then, чтобы получить данные

let response = await fetch(url);
let data = response.json();
data.then((res)=>{
  console.log(res)
})
// 搞定 res 就是我们要的数据拉

упаковка

Мы используем fetch, чтобы сделать простую инкапсуляцию запроса, и, кстати, еще раз просмотреть опции.Многие конфигурации могут не понадобиться на практике, и есть конфигурации по умолчанию (конфигурация опций по умолчанию указана в скобках ниже).

function request(url, data = {}) {
  // options配置的默认选项在括号中
    return fetch(url, {
        method: "POST", //(GET), POST, PUT, DELETE, etc
        mode: "cors", // (same-origin), no-cors, cors
        cache: "no-cache", // (default), no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", //(same-origin), include, omit
        headers: {
            "Content-Type": "application/json",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", //(follow), manual, error
        referrer: "no-referrer", //(client), no-referrer
        body: JSON.stringify(data), // 这里格式要与 "Content-Type" 同步
    })
    .then(response => response.json());
}

наконец

Первый раз пишу пост, если есть ошибки или неточности прошу обязательно поправить, спасибо

Ссылаться на:

Категории