axios的请求类型

234 阅读3分钟

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境中发送 HTTP 请求,它支持多种类型的请求,以下是常见的几种:

GET 请求

  • 用途:常用于从服务器获取数据,比如获取文章列表、用户信息等资源,而且 GET 请求的参数会直接附加在 URL 后面。

  • 示例代码

axios.get('/user?id=123')
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

这里向/user这个接口发送 GET 请求,并传递了一个名为id,值为123的参数,成功后会在控制台打印出服务器返回的数据,若出现错误则打印错误信息。

也可以用另一种更常用的传递参数的方式:

axios.get('/user', {
    params: {
        id: 123
    }
})
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

POST 请求

  • 用途:通常用于向服务器提交数据来创建新资源,例如提交表单数据创建新用户、发布一篇新文章等场景。POST 请求的数据一般放在请求体中发送。
  • 示例代码
axios.post('/user', {
    username: 'testuser',
    password: '123456'
})
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

这段代码向/user接口发送 POST 请求,提交了包含用户名和密码的用户信息数据,成功后会输出服务器响应的数据,失败则输出错误内容。

PUT 请求

  • 用途:主要用于更新服务器上已有的资源。例如更新一篇已存在的文章内容、修改某个用户的信息等情况会用到 PUT 请求。

  • 示例代码

axios.put('/article/1', {
    title: 'Updated Article Title',
    content: 'New content of the article'
})
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

这里是对id1的文章进行更新操作,将新的标题和内容等数据通过 PUT 请求发送到服务器,根据服务器响应来进行后续处理。

DELETE 请求

  • 用途:顾名思义,用于删除服务器上的指定资源,比如删除一条用户评论、删除某个用户账号等应用场景。

  • 示例代码

axios.delete('/comment/5')
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

此代码向/comment/5接口发送 DELETE 请求,尝试删除id5的评论,再依据服务器返回的响应做相应处理。

PATCH 请求

  • 用途:它和 PUT 请求类似,也是用于更新资源,但 PUT 一般是整体替换资源,而 PATCH 常用于对资源进行部分更新。例如只更新用户的某个字段(如修改用户的手机号等)时更适合用 PATCH 请求。

  • 示例代码

axios.patch('/user/10', {
    phone: '13888888888'
})
   .then(function (response) {
        console.log(response.data);
    })
   .catch(function (error) {
        console.log(error);
    });

以上是向id10的用户发送 PATCH 请求,仅更新其手机号这一个字段的信息,然后根据服务器的返回结果做下一步动作。

此外,Axios 还支持一些高级特性,比如设置请求头(headers)来传递如认证信息等额外数据、配置请求超时时间、拦截请求和响应进行统一处理等,能满足各种复杂的 HTTP 通信需求。