VUE中使用axios做ajax请求

最新推荐文章于 2024-09-20 16:29:25 发布

野子丿

最新推荐文章于 2024-09-20 16:29:25 发布

阅读量264

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_38169981/article/details/90597963

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

Vue 2.0后推荐使用axios。本文介绍了axios的安装、引入方法，列举了支持的请求方法别名，如axios.get、axios.post等，还说明了请求的响应结构，包含状态码、状态信息、头信息等，最后给出了get请求、post请求及并发请求的使用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios

1. 安装 axios

$ npm install axios

或

$ bower install axios

2. 在要使用的文件中引入axios

import axios from 'axios'

3. 使用axios做请求

可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

为方便，所有支持的请求方法都提供了别名:

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

4. 请求的响应结构

{
  // `data` 由服务器提供的响应
  data: {},

// status 来自服务器响应的 HTTP 状态码
status: 200,

// statusText 来自服务器响应的 HTTP 状态信息
statusText: ‘OK’,

// headers 服务器响应的头
headers: {},

// config 是为请求提供的配置信息
config: {}
}

使用 then 时，你将接收下面这样的响应：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用 catch 时，响应可以通过 error 对象可被使用

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .catch(function (error) {
    console.log(error);
  });

5. 使用实例

el1: get请求

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

el2: post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

el3: 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get(’/user/12345/permissions’);
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));