基于axios的二次封装

一个人走路可能会孤单，但一群人陪你将会奋勇直前

axios的二次封装

什么是axios?
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

为什么要二次封装了？

虽然axios已经能够满足常规的get post put 等数据请求和发送数据，但在涉及用户登陆和一些请求头的设置时就需要进行二次封装

话不多说先贴代码
新建request.js文件

 import Vue from 'vue'
 import axios from 'axios'
 import { ACCESS_TOKEN } from '@/store/mutation-types'  

// 创建 axios 实例
const service = axios.create({
    baseURL: 'http://localhost:3000', // 请求地址
    timeout: 6000 // 请求超时时间
})

const err = (error) => {
    if (error.response) {
        const data = error.response.data
        if (error.response.status === 403) {
           //当服务器拒绝了你的地址请求时
            conosle.log('服务器拒绝了你的请求')           
        }
        if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
           //401错误代表用户没有访问权限，需要进行身份认证
             console.log('未经授权，授权验证失败')
        }
    }
    return Promise.reject(error)
}

// 设置请求拦截
service.interceptors.request.use(config => {
    console.log('发起请求', config)
        const token = Vue.ls.get(ACCESS_TOKEN)    
         if (token) {
           config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自
         }
    return config
}, err)

//设置 响应拦截 
service.interceptors.response.use((response) => {
    console.log('收到响应', response)
    //返回内容
    return response.data
}, err)


export { 
    service as axios
}

页面输出

基于node.js写的简易后台