axios使用

最新推荐文章于 2024-11-01 10:18:14 发布

prettyFuture

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量92

点赞数

分类专栏： AJAX 文章标签：前端

本文链接：https://blog.csdn.net/m0_52167387/article/details/134364933

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

axios库基本使用
axios错误处理
封装简易版axios

axios库基本使用

前提：引入文件：axios.js文件，文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
语法：

基本使用

axios({
  url: '目标资源地址',
}).then(result => {
  // 对服务器返回的数据做后续处理
})

axios携带查询参数
使用params选项，携带参数名和值在对象结构中

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

当属性名和value位置变量名同名，ES6 对象属性和值可以简写

axios 如何提交数据到服务器
使用method 和 data 这2个新的选项

axios({
 url: '目标资源地址',
 //默认是get请求方法
 method: '请求方法',	
 //请求体用data，请求参数用params
 data: {
   参数名: 值
 }
}).then(result => {
 // 对服务器返回的数据做后续处理
})

应用案例

基本使用

需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用）
示例代码：

<body>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province

    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2. 使用axios函数
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      // 好习惯：多打印，确认属性名
      console.log(result.data.list)
      console.log(result.data.list.join('<br>'))
      // 把准备好省份列表，插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') 
    })
  </script>
</body>

axios携带查询参数

需求：获取“河北省”下属的城市列表，展示到页面
示例代码：

<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

向服务器提交数据

需求：注册账号，提交用户名和密码到服务器保存
示例代码：

/*
  注册用户：http://hmajax.itheima.net/api/register
  请求方法：POST
  参数名：
    username：用户名（中英文和数字组成，最少8位）
    password：密码  （最少6位）

  目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
  axios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'itheima007',
      password: '7654321'
    }
  })
})

axios错误处理

方法：使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，语法如下：

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

案例

需求：再次重复注册相同用户名，提示用户注册失败的原因
示例代码：

document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
})

打印错误对象用 console.dir(error)

封装简易版axios

基于 XMLHttpRequest 和 Promise 封装简易版axios方法，代码如下：

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
	// 1. 判断是否有请求参数
    if (config.params) {
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      config.url += `?${queryString}`
    }
     // 2. 默认get请求
    xhr.open(config.method || 'GET', config.url)

    xhr.addEventListener('loadend', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    // 3.1 判断有data选项，携带请求体
    if (config.data) {
      // 3.2 转换数据类型，在send中发送
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      // 如果没有请求体数据，正常的发起请求
      xhr.send()
    }
  })
}

document.querySelector('.reg-btn').addEventListener('click', () => {
  // 使用myAxios函数，完成注册用户
  myAxios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'itheima999',
      password: '666666'
    }
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.dir(error)
  })
})