vue中axios封装使用的完整教程

下面我将详细讲解一下“vue中axios封装使用的完整教程”。

一、什么是axios

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 上，这个库可以结合 Vue.js 实现 AJAX 请求。

二、axios的安装和引入

使用 axios 首先我们需要安装它：

npm install axios

然后我们在需要使用的 .vue 文件中引入 axios：

import axios from 'axios'

// 后续代码中需要使用到 axios 的地方

引入后就可以开始在 Vue.js 中使用 axios 进行 AJAX 请求了。

三、使用axios进行AJAX请求

使用 axios 进行 AJAX 请求的方法有多种，我这里列出常用的方法：

1. GET 请求

axios.get(url[, config])
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

其中 url 表示请求的地址，config 表示请求的配置参数，比如请求的头部信息，请求的超时时间等。

2. POST 请求

axios.post(url[, data[, config]])
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

其中 url 表示请求的地址，data 表示请求的数据，config 同样表示请求的配置参数。

3. 并发请求

有时我们需要同时发送多个请求，这时可以使用 axios 的并发请求功能：

axios.all([axiosMethod1, axiosMethod2])
    .then(axios.spread(function (response1, response2) {
        console.log(response1);
        console.log(response2);
    }))
    .catch(function (error) {
        console.log(error);
    });

其中 axiosMethod1 和 axiosMethod2 表示发送的两次请求，最终返回的 response1 和 response2 分别表示两次请求的响应结果。

四、axios的封装使用

对于一些通用的 AJAX 请求，我们可以对 axios 进行一些封装，方便以后多次使用。

以 GET 请求为例，下面是一个 get 方法的封装示例：

import axios from 'axios'

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            });
    });
}

其中 url 表示请求的地址，params 表示请求的参数。

有了这个封装之后，我们在 .vue 文件中就可以像下面这样调用：

import { get } from '@/api/index.js'

get('/user', {
    name: 'zhangsan'
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});

上述代码就是一个 get 请求的调用示例。