Axios基础 —— 一个基于AJAX和Promise的发送AJAX请求的库

一个在Vue和React中常用的发送AJAX请求的库，基于Promise和AJAX实现支持async/await用法

liushi21

210人浏览 · 2023-02-25 17:15:39

liushi21 · 2023-02-25 17:15:39 发布

Axios

一个在Vue和React中常用的发送AJAX请求的库，基于Promise和AJAX实现

支持async/await用法

发送AJAX请求

axios发送请求后返回一个Promise对象，所以可以使用Promise的方法对它指定回调函数

axios发送的请求中包含以下常用属性：

method：String，设置请求类型
url：url，请求的目标端口号
data：一个对象，其中以键值对存储数据。请求体，前端发送给后端的请求信息
…

格式：

axios({
    method:'xxx',
    url:'xxx',
    data:{
        //....
    }
}).then(response => {
   //拿到服务端返回的响应体对象后，对请求到的数据反馈进行后续处理 
}).catch(function(error){
    //出错的处理
}).then(function(){
    //总是会执行的代码，类似于Java的try-catch中的finall
})

通过axios传递相关配置来发送请求，将整个配置项对象作为参数传入

axios(config)

发送GET(读)请求

const btns = document.querySelectorAll('button');  //获取句柄
btns[0].event = function(){  //触发某一事件时触发该函数，使用axios发送请求
    axios({
        methods: 'GET',   //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
        url: 'http://localhost:3000/get',       //向哪个端口号发送请求
        
    }).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
        console.log(response.data);
	});
}

// 还可以使用get()方法发送GET请求
function getinfo(url){
    return axios.get(url);  //返回的是response响应体
}

在这里插入图片描述

发送POST(增)请求，返回的response是添加的信息的对象，如果要添加的信息已经存在于服务器中，则会有以下报错

在这里插入图片描述

const btns = document.querySelectorAll('button');  //获取句柄
btns[1].event = function(){  //触发某一事件时触发该函数，使用axios发送请求
    axios({
        methods: 'POST',   //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
        url: 'http://localhost:3000/posts',       //向哪个端口号发送请求
        
        //发送POST请求需要设置请求体data，里面放的是让服务器添加的信息的键值对
        data:{
            title: "关于Vue实现xxx功能的方法",
            author: "AC"
        }
    }).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
        console.log(response.data[0].title);
	});
}

发送PUT(更新)请求

需要在URL末尾传入要更改数据项的ID。PUT请求的请求体中的信息就是要让目的id更新的信息

const btns = document.querySelectorAll('button');  //获取句柄
btns[2].event = function(){  //触发某一事件时触发该函数，使用axios发送请求
    axios({
        methods: 'POST',   //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
        url: 'http://localhost:3000/posts/3',       //接收请求的端口号，发送PUT请求要传入要更改数据项的id
        
        //要求更新的信息，返回的response中是目的id对象更新后的信息
        data:{
            title: "关于Vue实现xxx功能的方法2.0",
            author: "AC"
        }
    }).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
        console.log(response);
	});
}

发送DELETE请求

const btns = document.querySelectorAll('button');  //获取句柄
btns[3].event = function(){  //触发某一事件时触发该函数，使用axios发送请求
    axios({
        methods: 'DELETE',   //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
        url: 'http://localhost:3000/posts/3',       //接收请求的端口号，让服务器删除该ID的信息
        
    }).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
        console.log(response);
	});
}

axios(url[, config])

// 默认发起GET请求
axios('http://localhost:3000/posts?params1=xxx&params2=yyy')

其他方式发送请求

使用request()方法发送AJAX请求

/*发送GET请求*/
axios.request({
   method: 'GET',
   url: 'xxx'
}).then(response => {
   //...
})


/*发送POST请求，注意参数格式变化*/
axios.post(
   'http://localhost:3000/xxx',  //第一个参数，请求的端口号url
   //第二个参数，一个对象，里面是需要要添加的信息，使用键值对
   {
       "userId":"jack",
       "userAccount": 123456,
       "otherInfo": "xxx"
   },
   //第三个参数，配置对象
).then(response => {
   //....
})

发起多个并发请求并使用Promise进行处理

function getInfo1(){
    return axios.get('xxx'); //端口
}
function getInfo2(){
    return axios.get('xxx');
}

//使用Promise的all()方法，将多个response作为一个数组传入，然后在then里进行处理
Promise.all([getInfo1(), getInfo2()]).then(function(res){
    console.log(res[0].data);
    console.log(res[1].data);
})

其他请求方式别名

使用别名时，不用在配置项中再写入url、method、data

在这里插入图片描述

axios配置对象

配置对象中可以设置以下内容，这里写出常见的

{
    url: '', //请求服务器的url
    baseURL: '', //使用了baseURL，url就用/xxx，服务器会自动将baseURL拼接在url之前（注意此时url不能是绝对url）
                 //举个例子： baseURL: 'http://localhost:3000/', url: '/posts‘
    			 //则拼接之后: 'http://localhost:3000/posts'
    
    transformRequest: [function(data, headers){
        //预处理请求头中的数据, 然后将处理完的结果发送到服务器
        //只可以在POST、PUT、PATCH请求中使用
        return xxx;
    }],
    transformRespnse: [function(data) {
        //对接收到的响应头信息进行预处理
        
        return data;
    }],
    //自定义头信息携带的标签
    headers: {'X-Requested-With': 'XMLHttpRequest'}
    
    //params携带请求头中url的参数， 就是?之后的内容，比如 ?articleId=1315
    //params应当是一个简单对象
    params: {
    	articleId: 1315,
    	key: value,
    	//...
	},

	//发送请求的超时时间，如果发送请求的时间超过了这个时间，那么请求发送就会取消，默认值为0
	timeout: XXX
}

其他配置项详见Axios中文文档

响应体Response结构

{
    data:{
        // 服务器回应客户端响应的直接数据结果
    },
    
    status: 404, // 服务器的HTTP状态码，详见https://blog.csdn.net/weixin_49904442/article/details/126858357
    statusText: '', // 服务器相应的HTTP状态信息
    headers: {
        // 服务器响应头
    },
    config: {
        // axios请求的配置信息
    },
    request: {
        // 生成响应的请求
        //浏览器中是 XMLHttpRequest 实例
    }
}

axios默认配置

全局默认配置

这将作用于项目中每个axios请求

axios.defaults.配置项 = xxx

自定义实例配置

使用axios的create()方法创建一个实例，从而可以动态修改axios配置的值, 或者是实时使用axios实例，建议使用这种方式

const ins = axios.create({
    baseURL: "http://localhost:3000",
    url: "/comments"
});

//实时修改配置的值
ins.defaults.url = "posts";
//实时操作
ins.get('http://localhost:3000/posts', {
    id: 1,
    timeout: 500 
})

//当然也可以创建一个空的实例，再实时设置值
const ins2 = axios.create();
ins2.defaults.baseURL = "http://localhost:3000/posts?id=1";

配置的优先级

配置合并的优先级：库默认值 > 实例的defaults属性 > 请求中设置的config参数

Axios拦截器interceptors

在请求或响应被then或catch处理前拦截将其拦截，进行操作

添加拦截器

// 添加到原型上
axios.interceptors.request.use(config => {
    //对config或其他传入参数进行处理
    return config; //或者传入的参数等等，这里返回需要的
}), function(error){ //注意这里是逗号 ,
    //处理响应错误, 2xx状态码都会触发这个
}

//创建一个axios实例然后添加到实例上
const ins = axios.create();
ins.interceptors.request.use(params => {
    //处理
})

//以上是对request添加的拦截器，还可以对response添加

移除拦截器 --> interceptors.eject()方法

axios.interceptors.request.eject(拦截器名称)

错误处理

打印HTTP错误信息：使用toJSON()方法错误信息转为JSON字符串

axios.get(url).catch(error => {
    console.log(err.toJSON());
})

对不同状态码进行处理，或者自定义抛出错误的HTTP状态码

使用validateStatus配置选项

//在配置项中
axios.get(url, {
    validateStatus: status => {
        //return status == xxx;
        //return status <= xxx;
        if(status == xxx){
            //...
        }else{
            //...
        }
    }
})

取消请求

AbortController - 中止控制器

v0.22.0版本的axios开始，支持使用Fetch API中的AbortController来取消请求

AbortController接口表示一个控制器对象，可以使用它中止一个或多个Web请求

使用步骤

//先调用接口创建一个AbrotController实例
const controller = new AbrotController();
//然后通过signal属性获取到AbortSignal（中止信号对象）的引用
const signal = controller.signal;
axios.get('url', {
    //配置项中传入中止信号对象，以便进行中止管理
    //也可以在配置项中获取中止信号对象： signal: controller.signal;
	signal: signal;    
}).then(response => {
    //...
})

//使用中止控制器实例调用abort()方法取消请求
controller.abort();

当abort()被调用中止请求时，fetch() Promise会抛出AbortError

(不建议)传递一个`executor`函数到`CancelToken`的构造函数来创建一个cancelToken实例

这个方法在v0.22.0开始就被弃用了，现在用最新的axios写的项目是不支持CancelToken的，不会生效

这种方法只适合在低版本axios中使用，或者老项目

该方法见axios中文文档

请求体编码

一般axios将js对象序列化为JSON，要用application/x-www-form-urlencoded格式发送数据，可选用以下方式：

浏览器中使用URLSearchParamsAPI
ES6
Node.js中使用querystring模块、qs库（尤其对嵌套对象进行字符串化处理）、form-data库

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB性能调优

华为开发者空间

cover

领取云主机，带你基于PyTorch构建高效手写体识别系统

华为开发者空间

cover

华为“云上先锋”实践赛·AI赛道现场会活动成功举办

华为开发者空间

所有评论(0)

查看更多评论

liushi21

已为社区贡献4条内容