写篇文章让自己清楚Ajax——(4)axios封装使用

430 阅读4分钟

axios并不是新的技术,其实就是对Ajax的封装,对XHR对象的封装,并且结合promise对象。本篇文章着重讲解axios的使用,而非底层解析。

官方文档:www.axios-js.com/zh-cn/

axios与Ajax

xhr对象实现异步请求,通过xhr我们得以实现ajax的设计模式。而axios是对ajax封装,所以也可以说axios是对xhr的封装。通过封装,我们实现ajax所需的代码将减少,我们将以更加清晰结构进行书写代码。同时因为对promise的使用,所以axios其实就是一种promise对象,可以使用then方法链式写法。

axios使用

axios使用方式多种多样(vue-等),本次我们只讨论es6下的axios使用格式。

首先记得导入axios:

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="application/javascript"></script>

快速上手

  • 下面一行代码就是完整且简单的axios请求和响应处理,默认get请求,不携带参数,将响应的内容进行展示(封装过)。
        axios('http://127.0.0.1:7001/axios').then(res=>{
            console.log(res)
        })

image.png

axios.get()和默认配置的axios一样。最简写法可以省略.then()

  • 如果要快速使用post请求
        axios.post('http://127.0.0.1:7001/axios',{name:'2'}).then(res=>{
            console.log(res)
        })
//服务端拿到地body数据
{ name: '2' }

image.png

最简写法可以省略.then()甚至是.post()的第二个参数——请求实体对象

通过两个示例我们可以发现axios可以单独作为函数进行ajax请求发送,默认是get(可以配置post),同时我们也有axios.getaxios.post可以固定请求方式进行ajax请求

因为axios返回一个promise对象,所以我们可以使用.then()接收服务器的响应对象,.catch()接收报错对象。

        axios.post(...).then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })

请求配置

http请求显然没有这么简单,我们虽然可以快速使用,但是我们同也容易面临需要配置请求信息的情况。

官方给过一个详细的配置参数讲解,不过本着实用的原则我们只学习会用到的参数。

axios请求配置

以下学习参数皆是axios的config参数对象的属性:

        axios({//单个字符串必须是url绝对地址,否则就是请求参数的对象。
            url: '/axios',
            method: 'post',
            baseURL: 'http://127.0.0.1:7001/',
            ......
        }).then(res => {
            console.log(res)
        })

axios中使用相对url绝对url概念。

通过上面的例子我们可以看出:baseURL + url = 完整的请求地址axios在请求之前会将baseURL自动拼接在url之前,通过这个方式,url便可以写成相对地址,即路由地址,如果我们不给baseURL赋值,就意味着url就必须要写成绝对地址,即完整的请求地址(多次尝试就会发现其实具体的规则都是aixos底层决定好了的,比如特殊情况可以这样写:url: '//127.0.0.1:7001/axios',baseURL: 'http:'

    url: 'http://127.0.0.1:7001/axios',
    baseURL: ''
    //和下面效果一样
    url: 'axios',
    baseURL: 'http://127.0.0.1:7001'

在拼接地址的时候会自动添加'/',所以我们可以不在url开头写'/'不在baseURL结尾写'/',写了也会自动处理,为了规范建议url在开头写'/'(例如: url: '/axios')。


header头部字段

配置对象中我们通过参数headers添加和修改头部字段信息:

    headers: {'content-type': 'application/json'},

仍然是大小写兼容,要求json对象格式。

data请求实体

这里的data指向的是我们请求报文的实体部分,axios通过封装,让我们便可以方便地放入数据。

            data: {
                name:'123'
            },

服务端拿到的body:

{ name: '123' }

params-get参数

            params: {
                id: 123
            },

服务端获取get方式的对应数据:

{ id: '123' }

使用post请求时同样可以通过params进行数据传输,并不建议,因为params就是请求url后面携带的字符串。

数据预处理

transformRequesttransformResponse属性帮助我们在请求实体发送之前和响应数据输出之前对数据进行修改处理:

            transformRequest: [function (data, headers) {
                // 对 data 进行任意转换处理
                console.log(data)
                console.log(headers)
                return data;
            }],
            transformResponse: [function (data) {
                // 对 data 进行任意转换处理
                console.log(data)
                return data;
            }]

虽然很方便,但是考虑到content-type字段与body实体数据格式应该一致,所以要留意不要让数据变化导致服务器无法识别,从而影响请求。

预处理的两个函数,我们可以认为是开放给开发者的封装设计部分。

响应结构

作为响应,分为正确响应和报错时错误对象的响应。

请求成功

请求失败