Axios ——基于 promise 的 HTTP 库

最新推荐文章于 2024-11-12 20:28:27 发布

Xyt1737

最新推荐文章于 2024-11-12 20:28:27 发布

阅读量1.7k

点赞数

文章标签： ajax jquery axios vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/Xyt1737/article/details/120856098

版权

本文详细介绍了基于Promise的HTTP库Axios的使用，包括基本使用、简写方式、axios实例创建以及请求拦截的配置方法，对比了原生ajax和jQuery的ajax请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

1. 原生ajax请求

2. jQuery封装下的ajax请求

4. 请求拦截

1. 原生ajax请求

实例化http请求对象
打开连接，设置请求的配置参数
发送请求并且配置请求体中的参数
监听http连接状态的改变，获取响应

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.101.202.33:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 13455667788,
      gender: 'male'
    }

    // 1.实例化http请求对象
    let xhr = new XMLHttpRequest()

    // 2.打开连接，设置请求的配置参数
    // xhr.open('get', baseUrl + '/index/category/findAll')
    // const qsData = qs.stringify(queryData)
    // xhr.open('get', baseUrl + '/index/article/pageQuery' + '?' + qsData)
    // xhr.open('post', baseUrl + '/user/login')
    // xhr.setRequestHeader(
    //   'Content-Type',
    //   'application/json'
    // )
    xhr.open('post', baseUrl + '/user/login')
    xhr.setRequestHeader(
      'Content-Type',
      'application/x-www-form-urlencoded'
    )

    // 3.发送请求并且配置请求体中的参数
    // xhr.send(JSON.stringify(loginData))
    xhr.send(qs.stringify(applyData))

    // 4.监听http连接状态的改变，获取响应
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.response));
      }
    }
  </script>
</head>

<body>

</body>

</html>

2. jQuery封装下的ajax请求

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <script src="../js/jquery.js"></script>
  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.101.202.33:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 13455667788,
      gender: 'male'
    }

    $.ajax({
      url: baseUrl + '/index/category/findAll',
      method: 'get',
      success(res) {
        console.log(res);
      },
      error(error) {
        console.log(error);
      }
    })
    $.ajax({
      url: baseUrl + '/user/login',
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      data: JSON.stringify(loginData),
      success(res) {
        console.log(res);
      },
      error(error) {
        console.log(error);
      }
    })
  </script>
</head>

<body>

</body>

</html>

3. axios请求

基本使用

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.101.202.33:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 13455667788,
      gender: 'male'
    }

    axios({
      baseURL: 'http://47.101.202.33:8888',
      url: '/user/login',
      method: 'post',
      data: loginData
    }).then(res => {
      console.log(res);
    }).catch(error => {
      console.log(error);
    })

    axios({
      baseURL: 'http://47.101.202.33:8888',
      url: '/user/login',
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: qs.stringify(loginData)
    })

    axios({
      baseURL: 'http://47.101.202.33:8888',
      url: '/user/login',
      method: 'get',
      params: {
        page: 1,
        pageSize: 10
      }
    })
  </script>
</head>

<body>

</body>

简写方式

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>
  <script>
    const qs = Qs
    const baseUrl = 'http://47.101.202.33:8888'
    const queryData = {
      page: 1,
      pageSize: 10
    }
    const loginData = {
      username: 'admin1',
      password: 123321
    }
    const applyData = {
      name: 'tom',
      age: 12,
      telephone: 13455667788,
      gender: 'male'
    }

    axios.defaults.baseURL = 'http://47.101.202.33:8888'
    axios.defaults.headers.common['auth'] = 'zhangsan'
    axios.defaults.headers.post['Authorization'] = 'token'

    axios.get('/index/category/findAll', {
      params: {
        page: 1,
        pageSize: 10
      }
    }).then(res => {
      console.log(res.data.data);
    })

    axios.post(
      '/user/login',
      loginData
    ).then(res => {
      console.log(res.data.data.token);
    })
  </script>
</head>

<body>

</body>

</html>

axios实例

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script src="../js/axios.js"></script>
    <script>
        // const qs = Qs
        const baseUrl = 'http://47.101.202.33:8888'
        const queryData = {
            page: 1,
            pageSize: 10
        }
        const loginData = {
            username: 'admin1',
            password: 123321
        }
        const applyData = {
            name: 'tom',
            age: 12,
            telephone: 13455667788,
            gender: 'male'
        }

        const instence1 = axios.create({
            baseURL: 'http://47.101.202.33:8888'
        })

        const instence2 = axios.create({
            baseURL: 'http://47.101.202.33:8888'
        })

        instence1.post('/user/login', loginData)
            .then(res => {
                console.log('行学天下', res.data.data.token);
            })

        instence2.post('/user/login', loginData)
            .then(res => {
                console.log('E洁家政', res.data.data.token);
            })
    </script>
</head>

<body>

</body>

</html>

4. 请求拦截

设置全局默认配置
设置请求拦截器
设置响应拦截器
发送请求

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <script src="../js/axios.js"></script>
  <script>
    // 1.设置全局默认配置
    axios.defaults.baseURL = 'http://47.101.202.33:8888'

    // 2.设置请求拦截器
    axios.interceptors.request.use(config => {
      // Do something before request is sent
      // console.log(config);
      // 获取token
      const token = sessionStorage.getItem('token')
      // 判断请求目标路径只要不是登录接口，并且获取的token有值，把token设置到本次请求的请求头中
      if (config.url != '/user/login' && token) {
        config.headers['Authorization'] = token
      }
      return config;
    }, error => {
      // Do something with request error
      return Promise.reject(error);
    });

    // 3.设置响应拦截器
    axios.interceptors.response.use(response => {
      // Do something before response is sent
      // 将响应拦截下来，自定义内容后再返回
      console.log('重构之前', response);
      response = {
        ...response,
        data: response.data.data,
        statusText: response.data.message
      }
      return response;
    }, error => {
      // Do something with response error
      return Promise.reject(error);
    });

    // 4.发送请求
    axios.post('/user/login', {
      username: 'admin1',
      password: 123321
    }).then(res => {
      console.log('重构之后', res);
      sessionStorage.setItem('token', res.data.token)
    })

    // axios.post('/user/info', {
    //   username: 'admin1',
    //   password: 123321
    // }).then(res => {
    // })
  </script>
</head>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。