什么是Axios,怎样使用Axios?

管理员
2023-04-13 / 0 评论 / 17 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年04月13日,已超过318天没有更新,若内容或图片失效,请留言反馈。

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。
它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
Axios文档地址:https://www.axios-http.cn/

特性:
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
使用方式
Axios引入

外部引入cdn,以下两种方式任选一种即可。
//第一种

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//第二种

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios发送请求
第一种

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

第二种

// 上述请求也可以按以下方式完成(可选)
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });  

第三种Post请求

  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用Axios api来传递相关配置创建请求

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

响应结构
一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写,而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects),
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

当使用 then 时,将接收如下响应

axios.get('/users/123456')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

示例代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
  // 请求方式
  method: 'GET',
  // 请求的地址
  url: '接口地址',
  // URL 中的查询参数
  params: {
      id: 1
     }
   }).then(function (result) {
     console.log(result)
     //result.data为获取到的数据
   })

示例代码:

 axios({
        url: '/getUsers',
        method: 'get',
        responseType: 'json', // 默认的
        data: {
            //'a': 1,
            //'b': 2,
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });
0

打赏

评论 (0)

取消