• 9-AJAX-下-axios

    一 axios是什么

    上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

    Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。

    实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊

    1. 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
    2. jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

    Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

    二 Axios请求方式

    1、axios可以请求的方法：

    get：获取数据，请求指定的信息，返回实体对象
    post：向指定资源提交数据（例如表单提交或文件上传）
    put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
    patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
    delete：请求服务器删除指定的数据
    总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；

    2、get请求

    示例代码
    此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12

    <script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    3、post请求

    post请求一般分为两种类型

    1. form-data（常用于表单提交（图片上传、文件上传））

    2. application/json 一般是用于 ajax 异步请求

    示例代码

    form-data请求方式代码如下
    注意：请求地址Request URL: http://localhost:8080/data.json，
    请求头中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y
    参数形式：id:12

    <script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    applicition/json请求方式代码如下
    注意：请求地址Request URL: http://localhost:8080/data.json，
    请求头中Content-Type: application/json;charset=UTF-8
    参数形式：{id:12}

    <script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data={
                id:12
            }
            axios.post('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    4、put和patch请求

    示例代码
    put请求

    <script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.put('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'put',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    patch请求

    <script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.patch('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    5、delete请求

    示例代码
    参数以明文形式提交=>params
    注意：params方式会将请求参数拼接在URL上面，Request URL: http://localhost:8080/data.json?id=12
    参数形式：id:12
    Content-Type: text/html; charset=utf-8

    axios
  .delete("/data.json", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let params = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  params:params
}).then(res=>{
  console.log(res)
})



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    参数以封装对象的形式提交=>data
    data方式不会讲参数拼接，是直接放置在请求体中的，Request URL:http://localhost:8080/data.json
    参数形式：{id:12}
    Content-Type: application/json;charset=UTF-8

    //方法二
axios
  .delete("/data.json", {
    data: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let data = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  data:data
}).then(res=>{
  console.log(res)
})



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    6、并发请求

    并发请求，就是同时进行多个请求，并统一处理返回值。

    在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：
    示例代码

    // 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
  axios.spread((dataRes, cityRes) => {
    console.log(dataRes, cityRes);
  })
);



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    三 Axios实例

    1、创建axios实例

    示例代码

    let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    可以同时创建多个axios实例。
    axios实例常用配置：

    • baseURL 请求的域名，基本地址，类型：String
    • timeout 请求超时时长，单位ms，类型：Number
    • url 请求路径，类型：String
    • method 请求方法，类型：String
    • headers 设置请求头，类型：Object
    • params 请求参数，将参数拼接在URL上，类型：Object
    • data 请求参数，将参数放到请求体中，类型：Object

    2、axios全局配置

    示例代码

    //配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

    • 1
    • 2
    • 3
    • 4

    3、axios实例配置

    示例代码

    let instance = this.$axios.create();
instance.defaults.timeout = 3000;

    • 1
    • 2

    4、axios请求配置

    示例代码

    this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

    • 1
    • 2
    • 3

    以上配置的优先级为：请求配置 > 实例配置 > 全局配置

    四、拦截器

    拦截器：在请求或响应被处理前拦截它们

    1、请求拦截器

    示例代码

        //   请求拦截器
    axios.interceptors.request.use(config => {
      // 在发送请求前做些什么
      return config;
    }, err=>{
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err)
    });


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、响应拦截器

    示例代码

        // 响应拦截器
    axios.interceptors.response.use(res => {
      // 在请求成功后的数据处理
      return res;
    }, err=>{
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err)
    });


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3、取消拦截

    示例代码

    	let inter = axios.interceptors.request.use(config=>{
        config.header={
            auth:true
        }
        return config
    })
    axios.interceptors.request.eject(inter)


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    Kafka-exporter监控消费速度与生产速度差异规则
    spring-security-oauth2之AuthorizationServerConfigurerAdapter浅析
    关于HTTP模块访问之后响应网页
    贴片电阻具有哪些特性？
    第75步 时间序列建模实战：多步滚动预测 vol-3（以决策树回归为例）
    Jellyfish and Green Apple-Codeforces Round 902 (Div. 2)
    本地部署 Qwen-Agent
    剑指 Offer 47. 礼物的最大价值 （百度一面 算法题）
    git push解决办法：! [remote rejected] prod -＞ prod (pre-receive hook declined)
    大数据之DStream 转换 完整使用 (第十四章)
  • 原文地址：https://blog.csdn.net/qq_40589140/article/details/133656829