axios 是 Vue 推荐的一款基于 Promise 的 AJAX 组件。所以我们在使用 Vue 进行项目开发时一般都使用这个库来执行 AJAX 请求。

发送请求

  1. axios.get(url[,config]):发送GET请求
  2. axios.post(url,data):发送POST请求
  3. axios.put(url,data[,config]):发送PUT请求
  4. axios.delete(url[,config]):发送DELETE请求
  5. axios.options(url[,config]):发送OPTIONS请求
  6. axios.patch(url,data[,config]):发送PATCH请求
  7. axios.head(url[,config]):发送HEAD请求
  8. axios.request(config):发送各种请求

Promise

Promise对象中提供了两个方法 then 和 catch:

  1. then:请求执行成功时调用
  2. catch:请求失败时调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 执行请求返回 Promise 对象
    var ajax = axios.get('https://api.myjson.com/bins/nx1ge')

    ajax.then((res)=>{
    console.log( res.data ) // 返回的数据
    console.log( res.status ) // 状态码
    console.log( res.statusText ) // 状态码文本
    console.log( res.headers ) // 响应的协议头信息
    console.log( res.config ) // 请求的参数
    console.log( res.request ) // 原生 XMLHttpRequest 对象
    }).catch((err)=>{
    // 发送了请求,并且成功,但服务器返回状态码不是2xx时执行
    if (error.response) {
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
    }
    // 发送了请求,但服务器没有返回响应时执行
    else if (error.request) {
    // error.request 是原生的 XMLHttpRequest 对象
    console.log(error.request);
    }
    // 发送请求时出错
    else {
    console.log('Error', error.message);
    }
    // 请求的配置项
    console.log(error.config);
    })

axios配置

配置项 说明
url 请求地址
method 请求方法,默认是 default
baseURL 请求时的基地址
headers 设置 HTTP 头信息
params 请求时 URL 上的参数
data 请求时提交的数据,主要在PUT、POST、PATCH时使用
timeout 请求超时时间,单位:毫秒
responseType 指明服务器返回数据的类型,默认是JSON
onUploadProgress 上传文件时处理上传进程的回调函数
onDownloadProgress 下载时处理下载进度的回调函数

拦截器

在发送 AJAX请求前和处理AJAX响应前对数据进行拦截处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 在所有请求之前执行的代码
axios.interceptors.request.use(function (config) {
// 处理请求前代码
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

// 当服务器返回数据时执行的代码
axios.interceptors.response.use(function (response) {
// 请求成功时,拦截的代码
return response;
}, function (error) {
// 请求失败时,拦截的代码
return Promise.reject(error);
});