vue2.x项目从0到1（四）之axios封装

首先我们在utils的目录下创建一个 permission.js 的文件夹，然后在里面二次封装aios，代码如下

import axios from "axios";
// import qs from "qs"
import { Loading } from 'element-ui'

var loadingInstance
const request = axios.create({
    baseURL: 'http://39.99.248.185:9898',
    timeout: 20000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    withCredentials: false,
    qs: true,
    isImage: false,
    /* 自定义 */
    isLoading: true,
    isJson: false,
    // isLogin: false, // 登录接口
})

/* request拦截器 */
// 请求发出去前的拦截
request.interceptors.request.use(
    config => {
        // 加载时转圈圈
        config.isLoading &&
            (loadingInstance = Loading.service({
                text: '正在加载中',
                background: 'rgba(0, 0, 0, 0.3)'
            }))
        // 当isJson为true的时候 请求头变成传递json的请求头
        if (config.isJson) {
            config.headers = { 'Content-Type': 'application/json' }
            config.qs = false
        }
        let token = localStorage.getItem('token') // 获取token
        // 每次请求将token加入到请求头中
        token && (config.headers.Authoriztion = token)
        return config
    },
    err => {
        loadingInstance && loadingInstance.close() // 关闭转圈圈
        this.$message.error('网络状态差') // 报错则弹出网络状态差
        return Promise.reject(err)
    }
)

// 服务器返回请求时的拦截
request.interceptors.response.use(response => {
    // if (response.config.isLogin){
    //     let cookies = document.cookie
    //     console.log(cookies);
    // }
    loadingInstance && loadingInstance.close()
    return response //将主体内容返回  axios.get().then(result=>{拿到的就是响应主体})
}, error => {
    loadingInstance && loadingInstance.close() // 关闭转圈圈
    this.$message.error('网络状态差') // 报错则弹出网络状态差
    return Promise.reject(error)
})


export default request

然后 就是调接口 在 src 文件夹下方创建一个 api 的文件夹 然后在文件夹里创建index.js，里面代码如下

import request from "@/utils/request"

export function getUser(data) {
    return request.post('/user/login',
        data,
        { 
            isJson: true, 
            isLogin: true 
        }
    )

}