axios笔记

前言

现在来说，axios 基本是 vue 项目的标配了；之前大家比较常用的是 vue-resource 小巧又好用，后来（vue2之后） vue 作者推荐大家改用 axios 大家都慢慢转过来了。axios 确实有自己的优点：基于 Promise，可以同时在浏览器和 NodeJS 环境下使用等，找了下文档，列到下面了：

1. 在浏览器中发送 XMLHttpRequests 请求
2. 在 node.js 中发送 http请求
3. 转换请求和响应数据（拦截器）
4. 拦截请求和响应
5. 支持 Promise API
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持保护安全免受 CSRF/XSRF 攻击

安装

npm install axios --save

执行请求

// get
axios.get("/your/url", {params}).then(res => {
  // 得到服务器端数据，可以有多个 then()，每次 then() return 的数据，就是下次 then() 的实参
}).catch(error => {
  // 错误处理
})
  // 或者
axios({
  url: "/your/url",
  method: 'get',
  params
})
// post
axios.post("/your/url", {data}).then(res => {
  // 得到服务器端数据，可以有多个 then()，每次 then() return 的数据，就是下次 then() 的实参
}).catch(error => {
  // 错误处理
})
  // 或者
axios({
  url: "/your/url",
  method: 'post',
  data
})
// 同时执行多个请求
function fun1() {
  return axios.get('/your/url1');
}

function fun2() {
  return axios.get('/your/url2');
}

axios.all([fun1(), fun2()])
  .then(axios.spread(function (data1, data2) {
    // data1 是 fun1 的返回值
    // data2 是 fun2 的返回值
}));

在项目中使用

如果您的项目中直接使用了node_modules中的axios，并且使用axios.interceptors添加拦截器对请求或响应数据进行了处理，确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误。

上面的一段话是从 Nuxt 文档中摘过来的，从中可以看出要想高效使用 axios 需要我们创建实例，使用实例的方法。大部分情况下，可以从下面的代码开始

import axios from 'axios'
import qs from 'qs'

const $axios = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

$axios.interceptors.request.use(config => {
  // 请求参数等的处理，还比如设置请求头，token 等
  if (config.method.toLocaleLowerCase() == 'post') {
    config.data = qs.stringify(config.data)
  }
  return config
}, error => {
  console.log(error)
})

$axios.interceptors.response.use(response => {
  // 后台数据处理
  return response.data
}, error => {
  console.log(error)
})

export default $axios

具体就不解释了，看下注释，按项目的需求增加逻辑吧，比如请求超时处理，用户 token 过期处理，后台错误统一处理等。。。