zoukankan html css js c++ java

Web全栈探索，Vue基础系列，前后端交互（三）

axios

1.特性

基于promise用于浏览器和node.js的http客户端
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据

2.支持库文件下载地址

https://github.com/axios/axios


库文件地址（解压后）：
axios-masterdistaxios.js

3.入门代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
    axios.get('http://10.5.34.66:8104/temp/string').then(function(ret){
        
        // 此种方法只能用于获取后台字符串返回结果
        
        // .data用于直接获取后台的实际数据
        console.log(ret.data)
        // 原对象除了 data 数据以外，还有其他很多属性
        console.log(ret)
    })
</script>
</body>
</html>

4.常用 API

1.get和 delete请求传递参数

通过传统的url 以 ? 的形式传递参数
restful 形式传递参数
通过params 形式传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">

    // 以 传统的url 以 ? 的形式传递参数
    axios.get('http://10.5.34.66:8104/temp?id=1').then(function(ret){

        console.log(ret.data)
    })

    // 以 restful 形式传递参数
    axios.get('http://10.5.34.66:8104/temp/1').then(function(ret){

        console.log(ret.data)
    })

    // 以 params 形式传参
    axios.get('http://10.5.34.66:8104/temp',{
        params:{
            id: 1
        }
    }).then(function(ret){

        // 以 restful 形式传递参数
        console.log(ret.data)
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">

    // 以 传统的url 以 ? 的形式传递参数
    axios.delete('http://10.5.34.66:8104/temp?id=1').then(function(ret){

        console.log(ret.data)
    })

    // 以 restful 形式传递参数
    axios.delete('http://10.5.34.66:8104/temp/1').then(function(ret){

        console.log(ret.data)
    })

    // 以 params 形式传参
    axios.delete('http://10.5.34.66:8104/temp',{
        params:{
            id: 1
        }
    }).then(function(ret){

        // 以 restful 形式传递参数
        console.log(ret.data)
    })
</script>
</body>
</html>

2.post 和 put 请求传递参数

通过选项传递参数
通过 URLSearchParams 传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">

    /*
      axios请求参数传递
    */
    axios.post('http://10.5.34.66:8104/temp', {
      id: 1,
      name: 'lanyue'
    }).then(function(ret){
      console.log(ret.data)
    })

    let paramsOne = new URLSearchParams();
    paramsOne.append('id', 1);
    paramsOne.append('name', 'lanyue');
    axios.post('http://10.5.34.66:8104/temp', paramsOne).then(function(ret){
      console.log(ret.data)
    })

    // axios put 请求传参
    axios.put('http://10.5.34.66:8104/temp', {
        id: 1,
        name: 'lanyue'
    }).then(function(ret){
        console.log(ret.data)
    })

    let paramsTwo = new URLSearchParams();
    paramsTwo.append('id', 1);
    paramsTwo.append('name', 'lanyue');
    axios.put('http://10.5.34.66:8104/temp', paramsTwo).then(function(ret){
        console.log(ret.data)
    })



</script>
</body>
</html>

5.响应结果

注意：如果后台返回的是 json 数据，axios 会默认将数据转换为对象形式，前台获得数据后可以直接使用对象形式读取数据

data ===> 实际响应回来的数据
headers ===> 响应信息头
status ===> 响应状态码
statusText ===> 响应状态信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="../js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios 响应结果
    */
    axios.get('http://http://10.5.34.66:8104/temp').then(function(ret){
        // 以对象方式调用结果
        console.log(ret.data.id)
    })

  </script>
</body>
</html>

6.全局配置

# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
    /*
      axios 全局配置
    */

    // 配置请求的基准URL地址
    // 这样可以简化代码编写
    axios.defaults.baseURL = 'http://10.5.34.66:8104/';
    axios.get('temp').then(function(ret){
        console.log(ret.data)
    })

    // 配置请求头信息
    // 每次放松请求时，都会添加自己定义的请求头
    axios.defaults.headers['myRequestHead'] = 'huHai';
    axios.get('http://10.5.34.66:8104/temp').then(function(ret){
        console.log(ret.data)
    })


</script>
</body>
</html>

请求头生效效果

7.axios 拦截器

注意：拦截器的作用并非拦住数据包不让收，而是在请求、响应之后对数据进行相应的操作

1.请求拦截器

请求拦截器的作用是在请求发送前进行一些操作

例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

2.响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作

例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">

    /*
      axios请求拦截器
    */
    axios.interceptors.request.use(function(config) {

        // 利用请求拦截器为所有请求添加如下请求头
        config.headers.mytoken = 'huHai';
        // 必须返回 配置好的 config，否则拦截器设置无效
        return config;

    }, function(err){
        console.log(err)
    })


    /*
      axios响应拦截器
    */
    axios.interceptors.response.use(function(res) {

        // 得到响应结果，并利用响应拦截器将真正有效的数据（而不再是整个响应对象）返回
        let data = res.data;
        return data;

    }, function(err){
        console.log(err)
    })

    // 测试配置好拦截器的 axios
    axios.get('http://10.5.34.66:8104/temp').then(function(data){
        console.log(data)
    })
</script>
</body>
</html>

作者：蓝月

出处：http://www.cnblogs.com/https://www.cnblogs.com/viplanyue//

-------------------------------------------

个性签名：能我之人何其多，戒骄戒躁，脚踏实地地走好每一步

查看全文

相关阅读:
6大集合类
 数据导出到Excel/Word 防止出现乱码仅有一行数据导出的时候
 bootmgr is compressed 解决办法汇总
 RAID 独立磁盘真阵列
 C# 和 Js 取出时间间隔
 Image 获取缩略图
 ConvertJSONDateToJSDateObject 方法实现json格式时间串转换为对应的时间格式串
 纯js脚本的模式对话框
 癌症的IARC分级
 微信小程序如何在页面间传值

原文地址：https://www.cnblogs.com/viplanyue/p/13573727.html