axios浅析（一）

一、axios是什么

  axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON 数据
• 客户端支持防御XSRF

  实际上，axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios

简单来说，axios的基本原理就是

• axios还是属于 XMLHttpRequest， 因此需要实现一个ajax。或者基于http 。
• 还需要一个promise对象来对结果进行处理。

基本使用

安装

// 项目中安装
npm install axios --S
// cdn 引入

导入

import axios from 'axios'

发送请求

axios({        
 url:'xxx',    // 设置请求的地址
 method:"GET", // 设置请求方法
 params:{      // get请求使用params传参,如果是post请求则用data
   name:''
 }
}).then(res => {  
 // res为后端返回的数据
})

二、为什么要封装

  axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。

  这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

举个例子：

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true, // 当前请求为跨域类型时是否在请求中协带cookie 需要注意的是当配置了  xhr.withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) { // 允许在向服务器发送前，修改请求数据
    // 对 data 进行任意转换处理
    return data;
  }],
  transformResponse: [function (data) { // 在传递给 then/catch 前，允许修改响应数据
    // 对 data 进行任意转换处理
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

  如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了，这时候我们就需要对axios进行二次封装，让使用更为便利

点击看下篇如何封装