关于axios详解及二次封装

关于axios

Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
文档地址：https://www.axios-http.cn/docs/intro

特性

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

安装
使用 npm或者其他（yarn）等等

	$ npm install axios

axios 二次封装

原因：

• 1. 不用每次请求都重新写一些重复性的，减少代码量，减低维护难度。
• 2. 统一处理一些常规的问题，如：http错误。
• 3. 拦截请求和响应，提前对数据进行处理，如：获取token，修改配置项。响应是报错处理提醒

// 导入axios
import axios from 'axios'

// 利用axios对象的create方法,去创建一个axios实例
const api = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // 地址(可以根据不地址配置)
    timeout: 5000, // 请求超时时间,提示用户请求超时
    // withCredentials: true //  // `withCredentials` 表示跨域请求时是否需要使用凭证，默认false
})
/**
 * 设置请求数据参数传递的格式，默认是json格式
 * 看服务器要求什么格式,设置一个默认常用的，后请求里还可以修改覆盖
 */
api.defaults.headers['Content-Type'] = 'application/json'

// interceptors 是 axios 的拦截器：在请求或者响应被then或者catch处理前拦截
/**
 * 添加请求拦截
 *     -- 发起请求前做的事情
 */
api.interceptors.request.use(function (config) {
    // 发送请求前做些什么（添加token、cookie之类的）
    // let token=localStorage.getItem('token')
    // token && (config.headers.Authoriztion=token)
    return config;
}, function (err) {
    // 做错误处理
    return Promise.reject(err)
})
/**
 * 添加响应拦截
 * 服务器端返回信息->[响应拦截器]->客户端js获取到信息
 * response中包含属性：
 * data：相应数据，status:响应状态码, statusText：响应状态信息,
 *       headers：响应头, config：响应提供的配置信息, request
*/
api.interceptors.response.use(function (res) {
    // 2xx 范围内的状态码都会触发该函数（这里做响应成功后处理）
    return res.data;//将主体内容返回  axios.get().then(result=>{拿到的就是响应主体});
}, function (err) {
    // 超出2xx 范围的状态码触发该函数（做错误处理）
    // 如果有返回结果
    if (err) {
        switch (err.status) {
            //这里面根据公司需求进行写
            case 404:
                //进行错误跳转之类
                break;
            case 501:
                //进行提示之类的弹窗
                break;
            case 502:
                //进行提示之类的弹窗
                break;
        }
    } else {
        //服务器没有返回结果 分两种情况 断网  服务器崩了
        if (!window.navigator.onLine) {
            //断网处理：跳转到断网页面
            return
        }
        return Promise.reject(err)
    }
})