axios的基础

为什么要使用axios？

什么是axios？

Axios是一个基于promise的http库，可以用在浏览器和node.js中

axios的特点

特点

例子

执行get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

axios API

可以通过向axios传递相关的配置来创建请求
axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios(url[,config])

// 发送 GET 请求（默认的方法）
axios('/user/12345');

请求方法的别名

请求方法的别名

注意：在使用别名方法的时候，URL、method、data这些属性都不必在配置中指定

并发

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

响应结构
某个请求的响应包括以下信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

使用then的时候，你将接收下面这样的响应：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用catch时候，或者传递rejection callback作为then的第二个参数时，响应可以通过error对象可被使用

错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

reference

项目中的使用

作用
使用axios插件来支持发送http请求

引入
import axios from 'axios'

封装axios
其中部分参数使用formatRequest方法处理

/**
 * 封装axios来发送http请求
 * @param request 部分参数被处理，参考 formatRequest 方法；
 * 注：其余选项参考 axios 的相关文档
 */
function httpRequest (request) {
  return new Promise((resolve, reject) => {
    axios.request(formatRequest(request))
      .then(function (response) {
        if (response.status === 200) {
          if (response.data.code === '0000') {
            // 后端请求发送成功
            resolve(response.data)
          } else {
            // window.alert(response.data.errorMsg)
            reject(response.data)
          }
        } else {
          // window.alert('response status error: ', response.status)
          reject()
        }
      })
      .catch(function (error) {
        // window.alert('request error: ', error)
        reject()
      })
  })
}

formatRequest方法

/**
 * 格式化http请求的相关配置项
 * @param request 请求配置对象
 */
function formatRequest (request) {
  if (request instanceof Object) {
    // 对url进行处理
    if (request.url) {
      request.url = REQUEST_CONFIG[request.url]
    }
    if (request.token) {
      // 对token进行处理
      if (request.headers && typeof request.headers === 'object') {
        if (request.headers.accessToken === undefined) {
          Object.assign(request.headers, {
            accessToken: request.token
          })
        }
      } else {
        request.headers = {
          accessToken: request.token
        }
      }
      delete request.token
    }
  }
  return request
}

其中REQUEST_CONFIG是引用了外部文件的对象
import REQUEST_CONFIG from '../config/request'

config文件下的request.js主要是为了统一方便API的管理