Vue全局封装axios请求

一、 简介

使用Vue开发项目时，数据请求不再使用原生的ajax来请求数据，Vue官方库提供的vue-resource已经不再更新和维护，现在新项目基本都以axios作为主要请求方式；

二、使用

本例以POST单例请求为例

axios({
    method: "POST",    //请求方式
    url: baidu.com,    //请求地址
    data: this.data    //请求数据
}).then(res => {
    //请求成功
    console.log(res)
}).catch(err => {
    //请求失败
    console.error(err)
})

三、封装axios

分析：axios是一个基于Promise的HTTP请求客户端，正式开发过程中我们需要再次对axios进行二次封装，方便我们全局使用aixos请求数据、并且处理各种后台返回的状态用于提示用户错误信息；

首先在src目录下创建用于封装axios的js文件，并导出

目录：

代码块：

---------- 引入 ----------

import axios from 'axios'            //引入axios
import router from './router'        //引入路由
import { Message } from 'element-ui' //引入elementUI-Message

---------- 封装  ----------

export function post(obj) {              //调用时参数为一个对象
    return new Promise((resolve, reject) => { //穿件Promise实例
        axios({                          //单例js 不允要this                          
            method: "POST",              //请求方式
            url: obj.url,                //请求地址
            data: obj.data               //请求参数
        }).then(res => {                 //请求成功操作
            if (obj.IS !== false) {      //是否需要弹框提示
                successState(res)        //调用弹框封装
            }
            resolve(res)                 //新Promise对象实例（成功）
        }).catch(err => {                //请求失败操作
            let status = err.response.status;  //错误状态码
            switch (status) {
                case 400:                 //状态码400
                    Message({             //调用message组件
                        message: "数据格式错误，请重新填写！",
                        type: "error",    //组件类型
                        showClose: true   //是否可关闭
                    })
                    break;
                case 401:
                    Message({
                        message: "登录过期，已为您跳转到登录页！",
                        type: "error",
                        showClose: true
                    })
                    localStorage.removeItem("token")
                    router.push({ path: "/" });
                    break;
                case 500:
                    Message({
                        message: "服务器异常，请稍后再试！",
                        type: "error",
                        showClose: true
                    })
                    break;
                default:                    //不在上述范围内的错误处理
                    Message({
                        message: "未知错误！",
                        type: "error",
                        showClose: true
                    })

            }
            reject(err)                    //新Promise对象实例（失败）
        })
    })
}

---------- 请求拦截 ----------

axios.interceptors.request.use(function (config) { // 每次请求时会从localStorage中获取token
    let token = localStorage.getItem("token")
    var authorId = localStorage.getItem("authorId")
    if (token && authorId) {
        token = token // 把token加入到默认请求参数中
        authorId = authorId // 把token加入到默认请求参数中
        config.headers.common['token'] = token
        config.headers.common['authorId'] = authorId
    }
    return config
}, function (error) {
    console.log(error)
    return Promise.reject(error);
})

---------- 封装 弹框提示 ----------

function successState(res) {
    if (res.status == 200) {
        if (res.data.code == "0000") {  //请求成功状态码
            Message({
                message: res.data.msg,
                type: "success",        //指定success弹框
                showClose: true
            })
            return
        } else if (res.data.code == "0001") { //请求失败状态码
            Message({
                message: res.data.msg,
                type: "error",          //指定error弹框
                showClose: true
            })
            return
        } 
    }
     //.........更多........
}

----------  调用 ----------

import { post } from '../request' //导入post函数

  created() {
    this.Get(); //获取数据
  },

  methods: {
    Get() {
      post({ //函数内部调用函数 传参为对象形式
        url: "https://www.baidu.com",          //请求地址
        data: this.Search,                     //请求数据
        IS: false                              //是否需要弹框提示
      }).then(res => {                         //这里可以继续then->res
        this.tableData = res.data.list;        //处理业务逻辑........
      });
    },
    }

----------  成功 ----------