Axios在vue项目中的安装使用以及基本的请求方法

Posted on by hackdl

Axios是什么

Axios 是一个流行的 JavaScript 库，用于在 Web 浏览器和 Node.js 中发起 Http 请求和处理响应。

它提供了一种易于使用、灵活和强大的方式来与服务器进行数据通信。Axios 具有一些有用的特性，如自动转换 json 响应、请求/响应拦截、取消请求等等。

它也是 Vue.js 官方推荐的 Http 库之一。

如何安装

在 Vue 项目中使用 Axios，你需要先安装 Axios 库。

主要有三种安装方式：

1、可以使用 npm 或者 yarn 命令行工具安装 Axios

使用 npm 安装 Axios：

npm install axios

使用 yarn 安装 Axios：

yarn add axios
2、直接引用 Axios

3、通过 Bower 安装

如果想通过 Bower 安装 Axios ，需要先在本地安装 Bower。

3.1  使用 npm 全局安装 Bower：

npm install -g bower
3.2  在项目根目录下创建 bower.json 文件，指定依赖项：

{
  "name": "my-project",
  "dependencies": {
    "axios": "^0.21.4"
  }
}

其中，”dependencies” 属性指定项目所依赖的库及其版本号，这里使用了 ^0.21.4，表示安装 0.21.x 系列的最新版本。

3.3  执行 bower install 命令，安装依赖项：

bower install

执行完成后，Axios 及其依赖项将被安装到 bower_components目录下。

3.4 在 HTML 文件中引用 axios：

注意：在使用 Bower 安装 Axios 时，需要手动在 Html 文件中引用 Axios，无法通过 import 或 require 语句在 JS 文件中直接引用。

使用 Axios

在组件中使用 Axios 通常有两种方式：

1、在组件内部直接引入 Axios 库并使用

这种方式需要在组件内容进行安装，即在组件的



2、在 main.js 中引入 Axios 库，并挂载到 Vue 实例上

这种方式需要在项目的主入口文件(main.js)中引入 Axios 并挂载到实例上，就可以在所有组件中通过 this.$axios 来使用，如下所示：

// main.js

// 引入并挂载
import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$axios = axios;

new Vue({
  el: '#app',
  // ...
});
// 直接使用this.$axios调用
// 如get请求
this.$axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Axios 的请求方法

Axios 支持以下 http 请求方法：

1、Get: 从服务器获取资源

在 Axios 中，使用 Get 请求有以下两种类型：

1.1 普通 Get 请求

直接在 url 后面添加参数，如：

this.$axios.get('/user?id=123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1.2 带参数的 Get 请求

使用 params 属性来传递参数，如：

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

Axios 会自动将参数序列化成 url 参数格式（如 “?id=123” ），并拼接在 url 后面。如果有多个参数，可以在 params 对象中添加多个属性即可，如：

this.$axios.get('/user', {
    params: {
        id: 123,
        name: 'test',
        age: 18
    }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
2、POST：向服务器提交数据

在 Axios 中，使用 Post 请求有以下几种类型：

2.1 普通的 Post 请求

发送普通的 post 请求，请求体为 json 数据：

this.$axios.post('/api/user', {
  name: 'Alice',
  age: 18
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})
2.2 使用 FormData 对象发送 Post 请求

使用 FormData 对象发送表单数据：

let formData = new FormData()
formData.append('name', 'Alice')
formData.append('age', 18)

this.$axios.post('/api/user', formData)
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})
2.3. 使用 FormData 对象上传文件

发送文件上传请求，需要将请求头设置为 multipart/form-data：

let formData = new FormData()
formData.append('avatar', file)

this.$axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})
2.4 发送 URLSearchParams 数据

URLSearchParams 是一个内置的对象，用于处理 url 中的查询参数。可以使用该对象来构建需要发送的数据，而不必手动构建字符串。

let params = new URLSearchParams();
params.append('name', 'John');
params.append('age', 25);

this.$axios.post('/api/user', params)
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
3、PUT：在服务器上更新资源(客户端提供完整资源数据)

使用 Put 请求的类型一般有两种：

3.1 传统方式

传统方式下，Put 请求用于更新指定 uri 中已存在的资源。在发送 Put 请求时，需要指定要更新的资源 uri ，以及要更新的资源内容。

this.$axios.put('/api/users/1', {
  name: 'new name',
  age: 20
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上面的代码表示将 ID 为 1 的用户信息更新为 { name: ‘new name’, age: 20 } 。需要注意的是，在传统方式下，Put 请求会用请求体中的数据完全替换指定 uri 中已存在的资源。

3.2 RESTful方式

RESTful 方式下，Put 请求用于更新指定 uri 中已存在的资源。但是，RESTful 风格下，Put 请求只允许更新指定资源的部分属性，而不是完全替换。

this.$axios.put('/api/users/1', {
  name: 'new name'
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

4、PATCH：在服务器上更新资源(客户端提供更改的属性)

使用patch请求时，一般可以使用以下两种类型：

4.1 普通的 Patch 请求

这种类型的请求是用来修改服务器上已存在的资源的。通常我们可以将待修改的资源数据通过请求传递给服务器。

this.$axios.patch('/api/users/1', { name: 'New Name' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，我们向服务器发送一个 Patch 请求，修改了 ID 为 1 的用户，名称为 “New Name”。

4.2 无 ID 的 Patch 请求

有些情况下，我们需要对资源进行某些修改，但并不知道该资源的 ID 是什么。在这种情况下，我们可以向服务器发送一个没有 ID 的 Patch 请求，服务器会根据请求中提供的数据来确定需要修改哪个资源。

this.$axios.patch('/api/users', { oldName: 'Old Name', newName: 'New Name' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，我们向服务器发送一个没有 ID 的 Patch 请求，包含旧的名称和新的名称，服务器会根据这些数据来确定修改哪个资源。

5、DELETE：从服务器删除资源

Delete 请求只有一种类型，用来删除资源。

this.$axios.delete('/api/user', {
  data: {
    userId: '123'
  }
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上面的代码中，向服务器中发送了 Delete 请求，请求 Url 为 “/api/user”，数据为 ” { userId: ‘123’ } “。如果请求成功，会打印出响应的数据，失败则打印错误信息。

6、HEAD：获取资源的元数据

Head 请求方法和 Get 方法类似，只是服务器在响应中不返回资源的内容，而是返回资源的元数据。

可以用于获取服务器响应头的信息，如获取资源的更新时间、资源类型等。

也可以用于获取资源的元数据，例如确认资源是否存在，或者检查资源是否已更改。

// 发送 HEAD 请求
this.$axios.head('/user/12345')
  .then(function (response) {
    console.log(response.headers);
  })
  .catch(function (error) {
    console.error(error);
  });

上面代码通过 this.$axios.head() 方法向 “/user/12345” 发送 Head 请求，并在打印出所有响应头的信息。

还可以使用 this.$axios.request() 方法来发送 Head 请求：

this.$axios.request({
  url: '/user/12345',
  method: 'head'
})
.then(function (response) {
  console.log(response.headers);
})
.catch(function (error) {
  console.error(error);
});

7、OPTIONS：获取服务器支持的请求方法和选项

在 Http 协议中，Options 请求方法通常被用于向服务器发出一个请求，以确定客户端可以执行哪些操作。

该请求方法不会真正获取资源，而是请求服务器提供关于该资源的哪些方法和选项的信息。

Options 请求方法通常用于跨域请求。

在 Axios 中，使用 Options 请求方法有两种类型，分别是简单请求和复杂请求：

7.1 简单请求

浏览器会自动发送一个 Options 请求，以获取服务端对 Cors 请求所支持的 Http 方法以及头信息（Access-Control-Allow-Methods 和 Access-Control-Allow-Headers）。如果服务端返回了适当的 Cors 头信息，则浏览器会根据请求方法和头信息来判断是否可以直接发送请求。

this.$axios.options('/api/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });
7.2 复杂请求

对于复杂请求，浏览器会先发送一个 Options 请求，以获取服务端对 Cors 请求所支持的 Http 方法以及头信息（Access-Control-Allow-Methods 和 Access-Control-Allow-Headers）。如果服务端返回了适当的 Cors 头信息，并且浏览器根据请求方法和头信息判断可以发送请求，那么浏览器就会发送实际的请求。

this.$axios.options('/api/data', {
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Request-Method': 'PUT'
  }
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面代码中，我们通过 headers 选项设置了请求头信息，包括 Content-Type 和 Access-Control-Request-Method。

这些信息将被发送到服务器，以便服务器能够正确处理请求。

8、同时进行多个请求

在 Axios 中，可以使用并发请求（concurrent request）来同时发送多个请求。

当多个请求返回后，可以使用 Promise.all 方法将它们的响应数据统一处理。

this.$axios.all([
  axios.get('/api/posts/1'),
  axios.get('/api/posts/2')
]).then(axios.spread((post1, post2) => {
  console.log('Post 1:', post1.data);
  console.log('Post 2:', post2.data);
})).catch(error => {
  console.log(error);
});

上面代码使用了 this.$axios.all 方法将多个请求同时发送，并使用 axios.spread 方法将它们的响应数据传递给一个函数进行处理。

如果任何一个请求返回错误，则会触发catch方法。

以上就是关于 Axios 在 Vue 项目中的一些基本安装及使用方式，希望对你有所帮助。

51cto / 公众号「 设计师工作日常 」，点赞关注。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: