vue项目中网络请求axios的封装

最近打算自己手撸个后台管理项目练练手，封装好了axios请求，一直没有后台的支持，不知道哪里有问题也没敢放上来，今天简单的启了个express的接口，调通后特来记录下axios的封装过程，其中参考了axios中文文档和掘金上的这篇文章

安装axios

npm install axios --save

项目目录是这样的，在src目录下创建一个专门用来放网络请求的文件夹request，然后在文件夹下创建一个axios.js文件和api文件夹，axios的基本配置写在axios.js里，业务逻辑的接口代码放在api文件夹中,方便统一管理。

在axios.js中引入

import axios from 'axios'

axios.js中的基本配置

弹出的提示，因为我全局用了element-ui所以弹窗直接用的是里边的组件，大家可以选择自己所用的UI框架的弹窗。

//创建实例
var instance = axios.create({
    timeout: 1000 * 10 //设置请求超时
})

//设置post请求时添加请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

//跳转登录，携带当前页面参数，登陆成功后跳转当前页
const toLogin = () => {
    router.replace({
        path: '/login',
        query: {
            redirect: router.currentRoute.fullPath
        }
    })
}

//请求拦截
instance.interceptors.request.use(
    //发送请求前所做
    config => {
        return config
    },
    //请求失败
    error => {
        return Promise.reject(error)
    }
)

//响应拦截
instance.interceptors.response.use(
    response => {
        //返回200请求成功，否则抛出异常
        if(response.status === 200) {
            return Promise.resolve(response)
        }else{
            return Promise.reject(response)
        }
    },
    //错误处理
    error => {
        if(error.response.status){
            switch(error.response.status){
                //401未登录，跳转登录页并记录下当前页面路径，登陆成功后跳转回该页
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    })
                    break;
                //403登录失效，清除登录信息并重新登录
                case 403:
                    //清除登录信息
                    //重新登录
                    setTimeout(() => {
                        toLogin
                    }, 1000);
                    break;
                //404找不到页面
                case 404:
                    this.$message({
                        message:"未找到页面",
                        type: "info"
                    })
                    break;
                default:
                    this.$message({
                        message: error.response.data.msg,
                        type: "error"
                    })
            }
            return Promise.reject(error.response)
        }
        return Promise.reject(error)
    }
)

export default instance

base.js

用来管理baseUrl，在多人合作的时候也能很方便。

const baseUrl = {
    base:'http://localhost:3000',
    baseTwo:'http://localhost:4000',
}

export default baseUrl

index.js

所有的需要导出的接口都写在api文件夹的index.js文件中统一管理

import loginModel from './login.js'

export default {
    loginModel
}

login.js

真正的业务代码可以分模块放在不同的文件中，例如login模块

import axios from './../axios'
import baseUrl from './base'
import qs from 'qs'

const loginModel = {
    login(params){
        return axios.post(`${baseUrl.base}/login`,qs.stringify(params))
    }
}
export default loginModel

main.js

最后还需要把axios挂载在vue原型上，这样就可以直接用this来调用了，在main.js文件夹中添加如下代码：

//挂载axios
import axios from './request/api/index.js'
Vue.prototype.$axios = axios

调用接口的时候直接用this.$axios对应的名字就能获取数据了

login(){
  this.$axios.loginModel.login().then(res =>{
    console.log(res)
  })
}