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

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

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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：

<script src="bower_components/axios/dist/axios.min.js"></script>

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

使用 Axios

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

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

这种方式需要在组件内容进行安装，即在组件的 <script> 标签内部引入 axios 库并安装，如下所示：

<template>
  <div>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    getData() {
      axios.get('http://example.com/api/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

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 请求用于更新指定 url 中已存在的资源。在发送 Put 请求时，需要指定要更新的资源 url ，以及要更新的资源内容。

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 请求会用请求体中的数据完全替换指定 url 中已存在的资源。

3.2 RESTful方式

RESTful 方式下，Put 请求用于更新指定 url 中已存在的资源。但是，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 项目中的一些基本安装及使用方式，希望对你有所帮助。

---

[1] ​​原文阅读​​

我是 Just，听说长的好看的都关注公众号[ 设计师工作日常 ]了！skr~ skr~ skr~