【vuejs】用vue写一个自己的博客管理系统（三）：axios封装和api管理

根据百度所说，axios是一个基于Promise的Http库，其实就是和ajax功能是一样的。不过比ajax好用的多。

首先，安装axios

//安装
npm install axios 

axios常用的请求和ajax都差不多。比如：

//get请求
axios.get('/api/getInfo').then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(err)
})

我们的vue项目中，可以封装axios，使其变得更好用
新建一个http.js（或者其他名称）。在src目录下可以新建一个utils文件夹，然后将文件放在里面。

//引用axios
import axios from 'axios'  
//引用store文件，这是个状态存储文件，后面会写到
import store from '../store/store' 
//引用element的两个弹窗
import { MessageBox, Message } from 'element-ui'  
//项目的token管理文件，主要用到的是得到token
import { getToken } from './auth'   

//api根地址的切换
//由于线上和线下测试可能用的不是一个数据库，所以api的地址可能会不一样，这时候我们就可以这样写一个，在不同的环境下，使用不同的api路径
let baseUrl;
if (process.env.NODE_ENV == 'development') {
    baseUrl = "http://101.37.173.223:3000/api"
} else if (process.env.NODE_ENV == 'production') {
    baseUrl = "http://101.37.173.223:3000/api"
}

//新建
let service = axios.create({
    baseURL: baseUrl,
    // timeout: 5000,
})

//发送请求
service.interceptors.request.use(config => {
	//如果当前有token
    if (store.getters.token) {
        // 设置token
        config.headers['token'] = getToken() || store.getters.token// 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
}, error => {
    Promise.reject(error)
})

//接收请求
service.interceptors.response.use(
    response => {
        const res = response.data;
        //这些返回代码是后台自己设定的，要根据自己实际情况来设置
        if (res.code != "200") {
            if (res.code === "888") {
                MessageBox.confirm(res.message, '警告', {
                    confirmButtonText: '重新登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                	//这是状态管理中  重设token的方法。
                    store.dispatch('user/resetToken').then(() => {
                        location.reload()
                    })
                })
            }
            return Promise.reject(res)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error)
    }

)

export default service

在写页面的过程中，会调用许多的api，为了避免api混乱，我们可以将同一种类型的不同的api放在同一个文件里，这样好看实用又便于修改。
在src目录下，新建一个api文件夹。我们首先新建一个user.js，里面用来存放和用户有关的api。

//导入事先写好的封装好的axois文件。
import request from "../utils/http

//post方法，
export const login = (data) => {
  return request({
    url: "/user/login",
    method: "post",
    data
  });
};

//得到用户资料  get方法
export const getInfo = uid => {
  return request({
    url: "/user/getInfo",
    method: "get",
    params: {
      uid
    }
  });
};

在使用的时候，就可以这样

import { getRole } from "../../api/user.js";
methods:{
	getRoles(){
		getRole(1).then(res{
			//相应的事件
		}).catch(err=>{
			
		})
	}
}