vue axios请求加cookie vue axios设置请求头

axios的插件来调用API，vue中用axios请求接口，处理网络失败和网络超时问题,axios拦截器。axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制，降低代码耦合度，提高程序的可重用性，同时提高了开发的效率。
安装
安装axios和vue-axios，vue-axios是将axios集成到Vue.js的小包装器。方便我们使用。
axios安装

npm install axios;

在mian.js中引用axios，并邦到原型链上。使用插件的时候，一般要在入口文件main.js中引入，因为mian.js是项目首先运行的文件：

import Vue from 'vue'
import axios from ‘axios’
//一般不这么使用
Vue.prototype.$http = axios

安装vue-axios

npm install --save axios vue-axios

在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

一般会使用 vue-axios 的插件写法，更符合 Vue 整体生态环境，直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。

一、axios的封装
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。

1、在https.js文件引入

import axios from 'axios'

2、环境切换
项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。

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

3、设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。
//设置访问超时时间

axios.defaults.timeout = 10000;

4、post请求头的设置
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

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

5、请求拦截
我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
// HTTPresponse拦截，响应拦截
axios.interceptors.response.use(res => {

//相应回的auth-token
    sessionStorage.setItem('xAuthToken', res.headers['x-auth-token'])
    const status = res.data.code || 200
    // const statusWhiteList = website.statusWhiteList || [];
    const message = res.data.msg || '未知错误';
    //如果在白名单里则自行catch逻辑处理
    // if (statusWhiteList.includes(status)) return Promise.reject(res);
    //如果是401则跳转到登录页面
    // if (status === 401) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
    // 如果请求为非200否者默认统一处理
    if (status !== 200) {
        Message({
            message: message,
            type: 'error'
        })
        return Promise.reject(new Error(message))
    }
    return res;
}, error => {
    // LoadingStart.close()
    return Promise.reject(new Error(error));
})

6、封装get方法和post方法等请求
新建一个api.js

import request from "./https";

const api = {
    // 预留的公共接口
}
export default api;

export function get(url, parameter) {
    return request({
        url: url,
        method: 'get',
        params: parameter
    })
};

export function post(url, parameter) {
    return request({
        url: url,
        method: "post",
        params: parameter
    })
};

// post method= {post | put | get| delete}
export function httpAction(url, parameter, method, contentType) {
    debugger
    return request({
        url: url,
        method: method,
        data: parameter,
        header: {
            //常用 "application/json" "application/x-www-form-urlencoded"
            "Content-Type": contentType

        }
    })
};

//put
export function putAction(url, parameter) {
    return request({
        url: url,
        method: 'put',
        data: parameter
    })
};

//deleteAction
export function deleteAction(url, parameter) {
    return request({
        url: url,
        method: 'delete',
        params: parameter
    })
}

// 获取pdf二进制文件流
export function postPdf(url, data) {
    return request({
        url: url,
        method: 'post',
        data: data,
        header: {
            //常用 "application/json" "application/x-www-form-urlencoded"
            "Content-Type": 'application/json;charset=utf-8'
        },
        responseType: 'blob' //arraybuffer/blob//加上格式，二进制
    })
}