axios基础使用

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：请求失败时调用

// 执行请求返回 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配置

拦截器

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

// 在所有请求之前执行的代码
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);
  });