axios封装

使用说明

1、安装axios

npm install axios

2、建文件夹

一般会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

3、引入

①在main.js中引入http.js,并全局挂载它

import axios from './request/http.js'     //引入http.js

Vue.prototype.$http = axios        //全局挂载封装的http.js

②在需要请求接口的地方引入api.js（当然你也可以全局挂载api.js）

4、使用

this.$http.get(api.接口名路径).then((data)=>{

}).catch((err) => {
    
})

下面是代码部分

http.js代码部分

// 在http.js中引入axios
import axios from 'axios';           //引入axios
import Qs from 'qs';                 // 引入qs模块，用来序列化post类型的数据，后面会提到
// import store from '@/store/index';   // vuex的路径根据自己的路径去写
// import { Toast } from 'vant';        // vant的toast提示框组件，大家可根据自己的ui组件更改。


//环境的切换  有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀（通过xios.defaults.baseURL可以设置axios的默认请求地址）
if (process.env.NODE_ENV == 'development') {
	axios.defaults.baseURL = 'https://cnodejs.org';}
else if (process.env.NODE_ENV == 'debug') {
	axios.defaults.baseURL = 'https://cnodejs.org';
}
else if (process.env.NODE_ENV == 'production') {
	axios.defaults.baseURL = 'https://cnodejs.org';
}

//设置请求超时 （axios.defaults.timeout）
axios.defaults.timeout=10000;

//post请求时需要加上请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

//请求前的拦截
// 先导入vuex,因为我们要使用到里面的状态对象
//请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    }
)
// 这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

//响应拦截
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面
                case 403:
                    Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                break;
                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                break;
                // 其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
);

//get方法封装
/*
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
*/
export function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}
//post方法封装
/*
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
*/
 export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

//导出axios
export default axios

api.js代码部分

const api = {
    //例子
    index:{
        indexPage:'/api/v1/topics'    //例子百度首页
    }
}
export default api

当然你也可以移步到我的github上去看它的详细使用过程 传送门