vue项目axios封装使用(1)

axios引入

一般的vue项目都会src目录中，新建一个request文件夹（这个名可以随便起，无所谓），然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

在http.js中引入axios

// 在http.js中引入axios

import axios from ‘axios’; // 引入axios

import QS from ‘qs’; // 引入qs模块，用来序列化post类型的数据，后面会提到

设置请求超时时间

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

axios.defaults.timeout = 10000; // 毫秒

post请求头的设置

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

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

请求拦截

我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

// 先导入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 && (conf