axios用法总结

axois 的封装

// 安装axios
npm install axios;

// 引入
import axois from 'axios'; // 引入axois模块
import QS from 'qs'; // 引入qs模块，用来序列化post类型数据

• 环境切换

// 环境切换
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = 'http://www.baidu.com';
} else if (process.env.NODE_ENV === 'debug') {
	axios.defaults.baseURL = 'http://www.ceshi.com';  
} else if (process.env.NODE_ENV === 'production') {
   axios.defaults.baseURL === 'http://www.procduction';
} 

• 设置请求超时

axios.defaults.timeout = 10000; // 请求超过10s，告知用户请求超时

• post请求头
  • post请求的时候，需要加上一个请求头，所以可是设置一个默认设置，即post请求头如下

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; chartset=UTF-8';

拦截请求

• 我们在进行请求前可以进行一个请求的拦截，比如有且请求是登录之后才能访问的，或者是post请求的时候，我们需要序列化数据，这时候就需要在发送请求之前进行一个拦截。

request请求拦截

// 先导入vuex，因为要使用里面的状态对象
// vuex的路径
import store from '@/store/index';

// 请求拦截
axios.interceptors.request.use(
	config => {
        // 每次发送请求之前刷新vuex中是否存在token
        // 如果存在，则统一在http的请求头header中添加token，后台根据token判断登录情况
        // 即使本地存在token,token也可能是过期的，所以响应请求中，要对返回的装填进行判断
        const token = store.state.token;
        token&&(config.headers.Authorization = token);
        return config;
    },
    
    error => {
        return Promise.error(error);
    },
);

• 一般登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后在每次进入页面的时候，（即在main.js中），会首先从本地存储中读取token,如果token存在，说明用户登录过，则更新vuex中token的状态，然后在每次请求的时候在header中带token.

response 响应拦截

// 响应拦截
axios.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;
                case 403:
                    /**
                     * 提示登录过期
                     */
                    // 清除localStorage中的token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转到登录页面，并要浏览页面的fullPath传过去，登录成功后需要访问的页面
                    setTimout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRpute.fullPath;
                            }
                        });
                    }, 1000);
                    break;
                case 404:
                    /**
                     * 提示请求页面不存在
                     */
                    break;
                default:
                    /**
                     * 抛出错误异常，
                     */
            }
            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.get()方法和axios.post() 在提交参数的时候写法是不同的，get的第二个参数是一个{}， 然后这个对象的params还是一个对象，而post的第二个参数就是一个参数对象，两者略有差别