AJAX三、XHR，基本使用，查询参数，数据提交，promise的三种状态，封装-简易axios-获取省份列表 / 获取地区列表 / 注册用户，天气预报

一、XMLHttpRequest基本使用

XMLHttpRequest（XHR）对象用于与服务器交互。

二、XMLHttpRequest-查询参数

语法: 用 & 符号分隔的键/值对列表

三、XMLHttpRequest-数据提交

核心步骤 :

请求头设置 Content-Type
请求体携带符合要求的数据

四、Promise

定义：Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。
概念: 管理异步操作的对象，可以获取成功（或失败）的结果
使用步骤:

实例化Promise对象
执行异步操作，并传递结果
获取结果

五、Promise的三种状态

待定（pending） : 初始状态，既没有被兑现，也没有被拒绝
已兑现（fullfilled） : 意味着操作成功完成
已拒绝（rejected） : 意味着操作失败
注意: Promise对象一旦被兑现/拒绝，就是已敲定了，状态无法再改变

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识-Promise</title>
</head>

<body>
  <h2>认识-Promise</h2>
  <script>
    /**
     * Promise
     *  浏览器的内置对象，管理异步操作，接收成功或失败的结果
     * */
    
    // 基于一个对象 可以写.then(正常结果)  .catch(异常结果)

    // 实例化一个Promise对象 ，才能抛出结果
    // const p = new Promise(函数)
    const p = new Promise((resolve, reject) => {

      // Promise 的结果 不能改变
      reject('失败了嘤嘤嘤')

      resolve('成功了哈哈哈哈')
    })

    p.then(res=>{
      console.log(res)
      
    }).catch(error=>{
      console.log(error)
      
    })
  </script>
</body>

</html>

六、例.使用 Promise+XHR 获取省份列表

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-使用 Promise+XHR 获取省份列表</title>
</head>

<body>
    <h2>案例-使用 Promise+XHR 获取省份列表</h2>
    <button class="success">请求成功</button>
    <button class="err">请求异常</button>
    <div class="box"></div>
    <script>
        // 把xhr和Promise结合 → then 和 catch 拿结果
        const p = new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            xhr.open('get', 'https://hmajax.itheima.net/api/province')

            xhr.addEventListener('loadend', function() {
                // console.log(xhr.response)
                // 如果成功了resolve； 否则reject → if
                // [200 -300) 都是成功，否则就是失败
                if (xhr.status >= 200 && xhr.status < 300) {
                    // resolve(真实数据-不能json字符串)
                    resolve(JSON.parse(xhr.response))
                } else {
                    reject(xhr.response)
                }
            })
            xhr.send()
        })

        p.then(res => {
            console.log('成功的结果', res)

        }).catch(error => {
            console.log('失败的结果', error)
        })
    </script>
</body>

</html>

七、封装-简易axios-获取省份列表

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装-简易axios函数-获取省份列表</title>
</head>

<body>
  <h2>封装-简易axios-获取省份列表</h2>
  <div class="box"></div>
  <script>
    /**
     * 封装-简易axios-获取省份列表
     * */
    //  promise对象.then().catch() -- 上午最后的例子
    // aixos().then().catch()

    // 为什么axios() == promise对象 ？ → 说明函数调用拿到的就是Promise对象

    // 函数基本语法：函数调用会拿到啥？ → 函数的返回值 → 封装函数，返回值是Promise对象
    // 返回值是Promise对象 负责干啥 → 发类似axios一样的网络请求拿数据 → xhr

    // axios({url: ''}).then().catch()

    function HMAxios(config) {
      // console.log(config)
      
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // xhr.open(请求方法, url)
        xhr.open(config.method || 'get', config.url)
        xhr.addEventListener('loadend', function() {
          // console.log(xhr.response)
          if (xhr.status >= 200 && xhr.status<300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(xhr.response)
          }
        })
        xhr.send()
      })
    }
    
    // 请求省份
    HMAxios({
      url: 'https://hmajax.itheima.net/api/province',
      // method: 'get'
    })
    .then(res => {
      console.log(res)
      
    })
    .catch(error=>{
      console.log(error)
      
    })

    // 请求新闻
    HMAxios({
      url: 'https://hmajax.itheima.net/api/news',
      method: 'get'
    }).then(res=>{
      console.log(res)
      
    })


  </script>
</body>

</html>

八、封装-简易axios函数-获取地区列表

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装-简易axios函数-获取地区列表</title>
</head>

<body>
  <h2>封装-简易axios函数-获取地区列表</h2>
  <div class="box"></div>
  <script>
    /**
     * 封装-简易axios函数-获取地区列表
    */
    // https://hmajax.itheima.net/api/area

    function HMAxios (config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // xhr.open(请求方法, 请求地址)

        // config.url = 原来默认的地址？ + 查询参数
        if (config.params) {
          const params = new URLSearchParams(config.params)  // 类似于对象 ， 请求地址要字符串格式
          // console.log(params)
          const str = params.toString()
          // console.log(str)
          config.url = config.url + '?' + str
          // console.log(config.url)
        }
        
  
        xhr.open(config.method || 'get', config.url)
        xhr.addEventListener('loadend', function() {
          // console.log(xhr.response)
          if (xhr.status>=200&&xhr.status<300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(xhr.response)
          }
        })
        xhr.send()
      })
    }



    HMAxios({
      url: 'https://hmajax.itheima.net/api/area',
      // method: 'xx',
      params: {
        pname: '河北省',
        cname: '唐山市'
      }
    }).then(res=>{
      console.log(res)
      
    })

    HMAxios({
      url: 'https://hmajax.itheima.net/api/lol/search',
      // params: {
      //   q: '安妮'
      // }
    }).then(res=>{
      console.log(res)
      
    })


  </script>
</body>

</html>

九、封装-简易axios函数-注册用户

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装-简易axios函数-注册用户</title>
</head>

<body>
    <h2>封装-简易axios函数-注册用户</h2>
    <button class="btn">注册用户</button>
    <script>
        /**
         * 封装-简易axios函数-注册用户
         */
        function HMAxios(config) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()

                // config.url = 原来默认的地址？ + 查询参数
                if (config.params) {
                    const params = new URLSearchParams(config.params) // 类似于对象 ， 请求地址要字符串格式
                        // console.log(params)
                    const str = params.toString()
                        // console.log(str)
                    config.url = config.url + '?' + str
                        // console.log(config.url)
                }

                xhr.open(config.method || 'get', config.url)
                xhr.addEventListener('loadend', function() {
                        // console.log(xhr.response)
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(JSON.parse(xhr.response))
                        } else {
                            reject(JSON.parse(xhr.response))
                        }
                    })
                    // 有body参数(data)send(json格式的data数据) ， 否则 send()
                if (config.data) {
                    xhr.setRequestHeader('content-type', 'application/json')
                    xhr.send(JSON.stringify(config.data))
                } else {
                    xhr.send()
                }
            })
        }


        HMAxios({
            url: 'https://hmajax.itheima.net/api/register',
            method: 'post',
            data: {
                username: 'daqiang8888',
                password: '123456'
            }
        }).then(res => {
            console.log(res)

        }).catch(error => {
            console.log(error)

        })
    </script>
</body>

</html>

十，天气预报

主要代码

javascript 复制代码

// 默认渲染 - 天气 → 北京
function getWeather(city){
  // 发请求拿数据 → 渲染
  HMAxios({
    url: 'https://hmajax.itheima.net/api/weather',
    params: {
      city
    }
  }).then(res=>{
    console.log(res.data)
    const data = res.data
    // 日期
    document.querySelector('.title').innerHTML = `
      <span class="date">${data.date}</span>
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${data.dateLunar}</span>
        </span>
    `
    // 替换城市名
    document.querySelector('.area').innerHTML = data.area
    // 今日温度
    document.querySelector('.weather-box').innerHTML = `
    <div class="tem-box">
        <span class="temp">
          <span class="temperature">${data.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${data.psPm25}</span>
          <span class="psPm25Level">${data.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${data.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${data.weather}</span>
          </li>
          <li class="windDirection">${data.windDirection}</li>
          <li class="windPower">${data.windPower}</li>
        </ul>
      </div>
    `

    // 一周天气
    const week = data.dayForecast
    console.log(week)
    document.querySelector('.week-wrap').innerHTML = week.map(item => {
      return `
        <li class="item">
          <div class="date-box">
            <span class="dateFormat">${item.dateFormat}</span>
            <span class="date">${item.date}</span>
          </div>
          <img src="${item.weatherImg}" alt="" class="weatherImg">
          <span class="weather">${item.weather}</span>
          <div class="temp">
            <span class="temNight">${item.temNight}</span>-
            <span class="temDay">${item.temDay}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${item.windDirection}</span>
            <span class="windPower">&lt;${item.windPower}</span>
          </div>
        </li>
      `
    }).join('')
    
  })
}

// 有参数 → 城市id → 北京城市id110100 string
getWeather('110100')

// 用户输入 → 请求对应的城市 → 渲染城市

// 引入库，文档中搜索函数使用 _.xx() → 返回值
// _.debounce(函数, 延迟时间)
// 这里是函数表达式写法， const fn = 匿名函数 → 顺序：先定义后使用
const fn = _.debounce(function() {
  // console.log(11)
  HMAxios({
    url: 'https://hmajax.itheima.net/api/weather/city',
    params: {
      city: document.querySelector('.search-city').value
    }
  })
  .then(res => {
    console.log(res.data)
    document.querySelector('.search-list').innerHTML = res.data.map(item => {
      // data-code 点击的时候按code值发请求渲染城市天气
      return `<li class="city-item" data-code="${item.code}">${item.name}</li>`
    }).join('')
  })
}, 800)


document.querySelector('.search-city').addEventListener('input', fn)

// 用户选中某个城市，发请求 → 得到这个城市的天气 → 渲染天气 → getWeather(城市id)
document.querySelector('.search-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('city-item')) {
    getWeather(e.target.dataset.code)
  }
})