Axios 简单总结

前言：最近在项目中， 使用 Axios 做前后端的 请求交互，这里对它做一个简单总结。首先我们需要了解一下，前端开发演变：

• 静态网页阶段：这个阶段的网页没有数据交互，所有的前端数据都由后端生成、维护，前端只负责纯粹的展示功能。如果需要更新页面内容，必须重新加载整个网页。带来的问题是：当我们只希望更新页面中一小部分的内容时，会因为重载网页而对页面中的所有资源也重新加载一遍，不仅用户体验不友好，还增加了服务器的负担。
• Ajax 阶段：为了解决上述问题，在 2004 年诞生了 Ajax 技术，让 页面 的 局部刷新 成为了可能，从而改变了前端开发，使得前端不仅仅是展示页面，还可以管理数据并与用户互动。Ajax 技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。整个过程中，后端只是负责提供数据，其他事情都由前端处理，实现了 "获取数据 → 处理数据 → 展示数据" 的完整业务逻辑。

---

• 什么是 Ajax，其他相关知识 ？

请参考本人其他博客：

1，关于Ajax的总结一 。

2，关于Ajax的总结二 。

3，关于Ajax的总结三 。

• 什么是 Axios ?

Axios：是 基于 promise 的 http 库，可运行在浏览器端和 node.js 中。

• Axios 有哪些优点 ?

1. 从浏览器中创建 XMLHttpRequests 。
2. 从 node.js 创建 http 请求 。
3. 支持 Promise API 。
4. 拦截请求和响应 。
5. 转换请求数据和响应数据 。
6. 取消请求 。
7. 自动转换 JSON 数据 。
8. 客户端支持防御 XSRF 。

• 怎么在项目中使用 axios ?（以 Vue 项目中为例）

安装 axios：

npm install --save axios

文件引入：

// 在http.js 中引入 axios
import axios from 'axios'
// 引入 qs 模块，可以用来序列化 post 类型的数据
import qs from 'qs'

【推荐】：一般会在项目的 src 目录下，新建一个 request 文件夹，里面新建 http.js 和 api.js 两个文件。前者用来 封装 axios，后者用来 统一管理接口。

环境的切换：

// 使用 axios.defaults.baseURL 设置默认请求地址
if(process.env.NODE_ENV == 'development'){ // 开发环境
    axios.defaults.baseURL = 'http://www.xxx'
}else if(process.env.NODE_ENV == 'debug'){ // 测试环境
     axios.defaults.baseURL = 'http://www.xxx'
}else(process.env.NODE_ENV == 'production'){ // 生产环境
     axios.defaults.baseURL = 'http://www.xxx'
}

设置请求超时：

// 设置超过 10s 会请求超时，告知用户刷新
axios.defaults.timeout = 10000;

设置 post 请求头：

// post 请求时，需要添加一个请求头
axios.defaults.headers.post[Content-Type] = 'application/x-www-form-urlencoded; charset=UTF-8';

请求拦截：【可做登录校验】

import store from '@/store/index'
axios.interceptors.request.use(
config => {
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
},
error => {
    return Promise.error(error);
})

响应拦截：【可根据后台请求状态值，做不同的处理】

axios.interceptors.response.use(
    response => {
        if(response.status === 200){
            return Promise.resolve(response);
        }else{
            return Promise.reject(response);
        }
    },
    error => {
        if(error.response.status){
            switch(error.response.status){
                case 401:
                // 做一些相关的操作
                。。。。。。
            }
        }
        return Promise.reject(error.response);
        
    }
)

封装 get 方法：

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data);
        })
    })
}

封装 post 方法：

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, qs.stringify(params))
        .then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data);
        })
    })
}

【 点击查看文档：http://www.axios-js.com/zh-cn/docs/ 】